Javascript 在 Safari 中禁用弹性滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8150191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable elastic scrolling in Safari
提问by Fabian Leutgeb
I just wanted to diable the elastic scrolling/bounce effectin Safari (OSX Lion).
我只是想在 Safari (OSX Lion) 中禁用弹性滚动/弹跳效果。
I found the solution to set overflow: hiddenfor body in css, but as expected it only disables the scrollbar, so if the website is "longer" than the screen you won't be able to scroll!
我找到了overflow: hidden在 css 中为 body设置的解决方案，但正如预期的那样，它只会禁用滚动条，因此如果网站“长”于屏幕，您将无法滚动！
Any solutions or hints are welcome! Thanks!
欢迎任何解决方案或提示！谢谢！
回答by Aintaer
You can achieve this more universally by applying the following CSS:
您可以通过应用以下 CSS 来更普遍地实现这一点：
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
This allows your content, whatever it is, to become scrollable within body, but be aware that the scrolling context where scrollevent is fired is now document.body, not window.
这允许您的内容，无论是什么，都可以在 内滚动body，但请注意，scroll触发事件的滚动上下文是 now document.body，而不是window。
回答by Yisela
If you use the overflow:hiddenhack on the <body>element, to get back normal scrolling behavior, you can position a <div>absolutely inside of the element to get scrolling back with overflow:auto. I think this is the best option, and it's quite easy to implement using only css!
如果您overflow:hidden在<body>元素上使用hack ，要恢复正常的滚动行为，您可以将 a<div>绝对定位在元素内部以使用overflow:auto. 我认为这是最好的选择，而且仅使用 css 就很容易实现！
Or, you can try with jQuery:
或者，您可以尝试使用 jQuery：
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
Same in javasrcipt:
在 javasrcipt 中相同：
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
Last option, check ipad safari: disable scrolling, and bounce effect?
最后一个选项，检查ipad safari：禁用滚动和反弹效果？
回答by sunderls
overflow:hidden;-webkit-overflow-scrolling:touchwon't work well on iOS safari 8.1, as the fixed header will be out of visible area.
overflow:hidden;-webkit-overflow-scrolling:touch在 iOS safari 8.1 上无法正常工作，因为固定标头将超出可见区域。
As @Yisela says, the css should be placed on .container(the <div>below <body>). which seems no problem(at leas on safari iOS 8.1)
正如@Yisela 所说，css 应该放在.container（<div>下面<body>）上。这似乎没问题（至少在 safari iOS 8.1 上）
I've place the demo on my blog: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
我已将演示放在我的博客上：http: //tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
回答by Martin
I had solved it on iPad. Try, if it works also on OSX.
我已经在 iPad 上解决了它。试试看，如果它也适用于 OSX。
body, html { position: fixed; }
body, html { position: fixed; }
Works only if you have content smaller then screen or you are using some layout framework (Angular Material in my case).
仅当您的内容小于屏幕或使用某些布局框架（在我的情况下为 Angular Material）时才有效。
In Angular Material it is great, that you will disable over-scroll effect of whole page, but inner sections <md-content>can be still scrollable.
在 Angular Material 中，您将禁用整个页面的过度滚动效果非常棒，但内部部分<md-content>仍然可以滚动。
回答by Lloeki
I made an extension to disable it on all sites. In doing so I used three techniques: pure CSS, pure JS and hybrid.
我做了一个扩展以在所有站点上禁用它。为此，我使用了三种技术：纯 CSS、纯 JS 和混合。
The CSS version is similar to the above solutions. The JS one goes a bit like this:
CSS 版本类似于上述解决方案。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);
The CSS one works when one is using position: fixed elements and let the browser do the scrolling. The JS one is needed when some other JS depends on window (e.g events), which would get blocked by the previous CSS (since it makes the body scroll instead of the window), and works by stopping event propagation at the edges, but needs to synthesize the scrolling of the non-edge component; the downside is that it prevents some types of scrolling to happen (those do work with the CSS one). The hybrid one tries to take a mixed approach by selectively disabling directional overflow (CSS) when scrolling reaches an edge (JS), and in theory could work in both cases, but doesn't quite currently as it has some leeway at the limit.
CSS 一种在使用 position: fixed 元素并让浏览器进行滚动时有效。当其他一些 JS 依赖于窗口（例如事件）时，需要 JS 一个，这会被之前的 CSS 阻止（因为它使主体滚动而不是窗口），并且通过在边缘停止事件传播来工作，但需要合成非边缘组件的滚动；缺点是它会阻止某些类型的滚动发生（那些确实与 CSS 一起工作）。混合方法试图通过在滚动到达边缘 (JS) 时有选择地禁用定向溢出 (CSS) 来采取混合方法，理论上可以在这两种情况下都有效，但目前还不太可行，因为它在限制上有一些余地。
So depending on the implementations of one's website, one needs to either take one approach or the other.
因此，根据一个人网站的实现，一个人需要采取一种方法或另一种方法。
See here if one wants more details: https://github.com/lloeki/unelastic
如果需要更多详细信息，请参见此处：https: //github.com/lloeki/unelastic
回答by yckart
You could check if the scroll-offsets are in the bounds. If they go beyond, set them back.
您可以检查滚动偏移量是否在边界内。如果他们超过了，就把他们放回去。
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);
回答by Gavin
None of the 'overflow' solutions worked for me. I'm coding a parallax effect with JavaScript using jQuery. In Chrome and Safari on OSX the elastic/rubber-band effect was messing up my scroll numbers, since it actually scrolls past the document's height and updates the window variables with out-of-boundary numbers. What I had to do was check if the scrolled amount was larger than the actual document's height, like so:
没有一个“溢出”解决方案对我有用。我正在使用 jQuery 使用 JavaScript 编写视差效果。在 OSX 上的 Chrome 和 Safari 中，弹性/橡皮筋效应弄乱了我的滚动数字，因为它实际上滚动了文档的高度并使用越界数字更新了窗口变量。我必须做的是检查滚动量是否大于实际文档的高度，如下所示：
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
回答by Owen Davey
None of the above solutions worked for me, however instead I wrapped my content in a div (#outer-wrap) and then used the following CSS:
上述解决方案都不适合我，但是我将内容包装在 div (#outer-wrap) 中，然后使用以下 CSS：
body {
overflow: hidden;
}
#outer-wrap {
-webkit-overflow-scrolling: touch;
height: 100vh;
overflow: auto;
}
Obviously only works in browsers that support viewport widths/heights of course.
显然只适用于支持视口宽度/高度的浏览器。
回答by Kieran
There are a to of situations where the above CSS solutions do not work. For instance a transparent fixed header and a sticky footer on the same page. To prevent the top bounce in safari messing things and causing flashes on full screen sliders, you can use this.
在某些情况下，上述 CSS 解决方案不起作用。例如，同一页面上的透明固定页眉和粘性页脚。为了防止 safari 中的顶部反弹搞砸并导致全屏滑块闪烁，您可以使用它。
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;
}
});
}
