在Safari中禁用弹性滚动
我只是想在Safari（OSX Lion）中使用弹性滚动/弹跳效果 。
我发现解决scheme设置overflow: hidden在CSS中的身体，但如预期，它只是禁用滚动条 ，所以如果网站比屏幕“更长，你将无法滚动！
任何解决scheme或提示，欢迎！ 谢谢！
您可以通过应用以下CSS来更普遍地实现这一点：
html, body { height: 100%; width: 100%; overflow: auto; }
这允许你的内容，不pipe它是什么，都可以在body滚动，但是请注意， scroll事件被触发的滚动上下文现在是document.body ，而不是window 。
如果使用overflow:hidden <body>元素，为了恢复正常的滚动行为，可以在元素内部绝对定位一个<div> ，以便使用overflow:auto滚动回滚。 我认为这是最好的select，而且只用css就可以轻松实现！
或者，你可以尝试使用jQuery：
$(document).bind( 'touchmove', function(e) { e.preventDefault(); } );
同样在javasrcipt：
document.addEventListener( 'touchmove', function(e) { e.preventDefault(); }, false );
最后一个选项，检查iPad的Safari浏览器：禁用滚动和反弹效果？
overflow:hidden;-webkit-overflow-scrolling:touch会在iOS Safari 8.1上无法正常工作，因为固定标题将会出现在可见区域之外。
正如@ Yisela所说，css应该放在.container （ <body>下面的<div> <body> ）。 这似乎没有问题（在Safari浏览器iOS 8.1）
我已经把演示放在我的博客上： http : //tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
我做了一个扩展，在所有网站上禁用它。 这样做我使用了三种技术：纯CSS，纯JS和混合。
CSS版本与上述解决scheme类似。 JS有点像这样：
var scroll = function(e) { // compute state if (stopScrollX || stopScrollY) { e.preventDefault(); // this one is the key e.stopPropagation(); window.scroll(scrollToX, scrollToY); } } document.addEventListener('mousewheel', scroll, false);
当一个使用位置的CSS工作：固定的元素，让浏览器滚动。 当一些其他JS依赖于窗口（例如事件）时，需要JS一个JS，它将被前面的CSS阻塞（因为它使得主体滚动而不是窗口），并且通过在边缘停止事件传播来工作，但是需要合成非边缘分量的滚动; 缺点是它阻止了某些types的滚动发生（那些与CSS一起工作）。 当滚动达到边缘（JS）时，混合式的尝试通过select性地禁用定向溢出（CSS）来采取混合方式，并且理论上可以在两种情况下工作，但是目前并不完全，因为它具有一定的余地。
所以根据网站的实现情况，需要采取一种方法或另一种方法。
看到这里，如果你想了解更多的细节： https ： //github.com/lloeki/unelastic
没有任何“溢出”的解决scheme为我工作。 我正在用jQuery编写JavaScript的视差效果。 在OSX上的Chrome和Safari中，弹性/橡皮筋效应搞乱了我的滚动数字，因为它实际上滚动了文档的高度，并用边界外的数字更新了窗口variables。 我所要做的就是检查滚动量是否大于实际文档的高度，如下所示：
$(window).scroll( function() { if ($(window).scrollTop() + $(window).height() > $(document).height()) return; updateScroll(); // my own function to do my parallaxing stuff } );
你可以检查滚动偏移量是否在界限内。 如果他们超越，把他们放回去。
var scrollX = 0; var scrollY = 0; var scrollMinX = 0; var scrollMinY = 0; var scrollMaxX = document.body.scrollWidth - window.innerWidth; var scrollMaxY = document.body.scrollHeight - window.innerHeight; // make sure that we work with the correct dimensions window.addEventListener('resize', function () { scrollMaxX = document.body.scrollWidth - window.innerWidth; scrollMaxY = document.body.scrollHeight - window.innerHeight; }, false); // where the magic happens window.addEventListener('scroll', function () { scrollX = window.scrollX; scrollY = window.scrollY; if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY); if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY); if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY); if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY); }, false);
上述解决scheme没有为我工作，但是我把我的内容包裹在一个div（＃外套），然后使用下面的CSS：
body { overflow: hidden; } #outer-wrap { -webkit-overflow-scrolling: touch; height: 100vh; overflow: auto; }
显然，只适用于支持视口宽度/高度的浏览器。
我已经在iPad上解决了它。 试试看，如果它也可以在OSX上运行。
body, html { position: fixed; }
只有当你有更小的屏幕内容，或者你正在使用一些布局框架（在我的情况下，angular材料）的作品。
在Angular Material中，很好，你将禁用整个页面的滚动效果，但内部部分<md-content>仍然可以滚动。
有一些情况下，上述CSS解决scheme无法正常工作。 例如在同一页面上的透明固定标题和粘性页脚。 为了防止Safari浏览器中的顶部反弹，并导致全屏幕滑块闪烁，可以使用此function。
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { $window.bind('mousewheel', function(e) { if (e.originalEvent.wheelDelta / 120 > 0) { if ($window.scrollTop() < 2) return false; } }); }
