This question already has an answer here:
这个问题在这里已有答案：
- ipad safari: disable scrolling, and bounce effect? 12 answers
- ipad safari：禁用滚动和弹跳效果？ 12个答案
I just wanted to diable the elastic scrolling/bounce effect in Safari (OSX Lion).
我只想在Safari（OSX Lion）中调整弹性滚动/弹跳效果。
I found the solution to set overflow: hidden for 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!
我找到了设置溢出的解决方案：隐藏在css中的body，但正如预期的那样它只会禁用滚动条，所以如果网站比屏幕“更长”，你将无法滚动！
Any solutions or hints are welcome! Thanks!
欢迎任何解决方案或提示！谢谢！
9 个解决方案
#1
54
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 scroll event is fired is now document.body, not window.
这允许您的内容，无论它是什么，在主体内可以滚动，但要注意滚动事件被触发的滚动上下文现在是document.body，而不是window。
#2
14
If you use the overflow:hidden hack 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 hack，为了恢复正常的滚动行为，你可以将
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：禁用滚动和弹跳效果？
#3
11
overflow:hidden;-webkit-overflow-scrolling:touch won'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上无法正常工作，因为固定标题将超出可见区域。
![在Safari中禁用弹性滚动[重复]](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0hNNkx5OXBMbWQ1WVhwdkxtTnZiUzgxTVRCaE1qUTJaamszT1RSaFpqa3dObUUwWXpsaFpHUmxaREJtTkdNeVpTNW5hV1k9.jpg?w=700&webp=1 "在Safari中禁用弹性滚动[重复]")
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（下面的
![在Safari中禁用弹性滚动[重复]](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0hNNkx5OXBMbWQ1WVhwdkxtTnZiUzlrWmpJek5UazRabU00TkdVM00ySXlZbVF5WldJeU5qUmhNV0l6T0RjNFlpNW5hV1k9.jpg?w=700&webp=1 "在Safari中禁用弹性滚动[重复]")
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
#4
5
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.
当一个人使用position：fixed元素并让浏览器进行滚动时，CSS工作。当一些其他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
#5
3
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:
没有任何“溢出”解决方案对我有用。我正在用JavaScript使用JavaScript编写视差效果。在OSX上的Chrome和Safari中，弹性/橡皮筋效果会使我的滚动数字变得混乱，因为它实际滚动超过文档的高度并使用超出边界的数字更新窗口变量。我要做的是检查滚动量是否大于实际文档的高度，如下所示：
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
#6
3
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);
http://jsfiddle.net/yckart/3YnUM/
http://jsfiddle.net/yckart/3YnUM/
#7
2
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.
显然只适用于支持视口宽度/高度的浏览器。
#8
2
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中，您可以禁用整页的过度滚动效果，但内部部分
#9
1
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;
}
});
}
#1
54
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 scroll event is fired is now document.body, not window.
这允许您的内容，无论它是什么，在主体内可以滚动，但要注意滚动事件被触发的滚动上下文现在是document.body，而不是window。
#2
14
If you use the overflow:hidden hack 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 hack，为了恢复正常的滚动行为，你可以将
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：禁用滚动和弹跳效果？
#3
11
overflow:hidden;-webkit-overflow-scrolling:touch won'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（下面的
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
#4
5
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.
当一个人使用position：fixed元素并让浏览器进行滚动时，CSS工作。当一些其他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
#5
3
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:
没有任何“溢出”解决方案对我有用。我正在用JavaScript使用JavaScript编写视差效果。在OSX上的Chrome和Safari中，弹性/橡皮筋效果会使我的滚动数字变得混乱，因为它实际滚动超过文档的高度并使用超出边界的数字更新窗口变量。我要做的是检查滚动量是否大于实际文档的高度，如下所示：
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
#6
3
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);
http://jsfiddle.net/yckart/3YnUM/
http://jsfiddle.net/yckart/3YnUM/
#7
2
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.
显然只适用于支持视口宽度/高度的浏览器。
#8
2
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中，您可以禁用整页的过度滚动效果，但内部部分
#9
1
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;
}
});
}