Html 防止网页“过度滚动”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12046315/
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
Prevent "overscrolling" of web page
提问by Randomblue
In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone.
在 Mac 版 Chrome 中，可以像 iPad 或 iPhone 一样“滚动”一个页面（因为没有更好的词），如下面的屏幕截图所示，以查看“后面是什么”。
I've noticed that some pages have it disabled, like gmail and the "new tab" page.
我注意到某些页面已禁用它，例如 gmail 和“新标签”页面。
How can I disable "overscrolling"? Are there other ways in which I can control "overscrolling"?
如何禁用“过度滚动”？还有其他方法可以控制“过度滚动”吗？
回答by Florian Feldhaus
The accepted solution was not working for me. The only way I got it working while still being able to scroll is:
接受的解决方案对我不起作用。我让它在仍然能够滚动的同时工作的唯一方法是：
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
回答by Koslun
In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:
在 Chrome 63+、Firefox 59+ 和 Opera 50+ 中，您可以在 CSS 中执行此操作：
body {
overscroll-behavior-y: none;
}
This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.
这将禁用问题屏幕截图中显示的 iOS 上的橡皮筋效果。然而，它也会禁用下拉刷新、发光效果和滚动链接。
You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:
但是，您可以选择在过度滚动时实现自己的效果或功能。例如，如果您想模糊页面并添加简洁的动画：
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Browser Support
浏览器支持
As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress hereand current browser compatibility at MDN documentation
在撰写本文时，Chrome 63+、Firefox 59+ 和 Opera 50+ 支持它。Edge 公开支持它，而 Safari 是未知的。在此处跟踪进度和MDN 文档中的当前浏览器兼容性
More information
更多信息
- Chrome 63 release video
- Chrome 63 release post- contains links and details to everything I wrote above.
overscroll-behaviorCSS spec- MDN documentation
- Chrome 63 发布视频
- Chrome 63 发布帖子- 包含我上面写的所有内容的链接和详细信息。
overscroll-behaviorCSS 规范- MDN 文档
回答by insertusernamehere
One way you can prevent this, is using the following CSS:
可以防止这种情况的一种方法是使用以下 CSS：
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.
这样，在页面顶部和底部滚动时，正文永远不会溢出，也不会“弹跳”。容器将完美地滚动其内容。这适用于 Safari 和 Chrome。
Edit
编辑
Why the extra <div>-element as a wrapper could be useful:
Florian Feldhaus' solutionuses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; }if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
为什么额外的<div>元素作为包装器可能很有用：
Florian Feldhaus 的解决方案使用的代码稍微少一些，而且工作正常。但是，当涉及到超出视口宽度的内容时，它可能会有一点怪癖。在这种情况下，窗口底部的滚动条被移出视口中途并且难以识别/到达。body { margin: 0; }如果合适，可以避免使用。在您无法添加此 CSS 的情况下，包装元素非常有用，因为滚动条始终完全可见。
Find a screenshot below:
在下面找到一个截图：
回答by Cormorano71
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}
回答by Daniel Prol
You can use this code to remove touchmovepredefined action:
您可以使用此代码删除touchmove预定义的操作：
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
回答by Moldavianheart
Try this way
试试这个方法
body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
回答by Yibo
Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.
除非网页高度等于window.innerHeight，否则无法禁用弹跳效果，您可以让您的子元素滚动。
html {
overflow: hidden;
}
回答by Tony Jin
position: absoluteworks for me. I've tested on Chrome 50.0.2661.75 (64-bit)and OSX.
position: absolute为我工作。我已经在Chrome 50.0.2661.75 (64-bit)OSX上进行了测试。
body {
overflow: hidden;
}
// position is important
#element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
