防止网页“过度滚动”
在Mac版的Chrome中，用户可以像iPad或iPhone一样，通过“滚动”页面(因为没有更好的词)来查看页面的“背后是什么”。
我注意到有些页面禁用了它，比如gmail和“新标签”页面。
如何禁用“超卷”功能？有没有其他方法可以控制“过度滚动”？
回答 8
Stack Overflow用户
发布于 2013-07-28 00:07:09
被接受的解决方案对我不起作用。我让它在滚动的同时工作的唯一方法是：
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}Stack Overflow用户
发布于 2017-12-07 10:09:50
在Chrome 63+、火狐59+和Opera 50+中，你可以在CSS中做到这一点：
body {
overscroll-behavior-y: none;
}这将禁用问题截图中所示的iOS上的橡皮筋效果。然而，它也禁用了拉动刷新、发光效果和滚动链接。
但是，您可以选择在过度滚动时实现自己的效果或功能。例如，如果您想要模糊页面并添加整洁的动画：
<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>浏览器支持
在撰写本文时，Chrome、火狐59+和63+ 50+都支持它。Edge公开支持它，而Safari还是个未知数。在MDN documentation上跟踪进度here和当前浏览器兼容性
更多信息
- Chrome 63 release video
- Chrome 63 release post -包含我写的所有above.
overscroll-behaviorCSS spec- MDN documentation
的链接和详细信息
Stack Overflow用户
发布于 2012-08-21 07:11:17
防止这种情况的一种方法是使用以下CSS：
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}这样，在页面的顶部和底部滚动时，正文就不会溢出，也不会“反弹”。容器将完美地滚动其中的内容。这在Safari和Chrome中都有效。
编辑
为什么额外的<div>__-元素作为包装器会很有用：
Florian Feldhaus' solution使用的代码稍微少一些，而且运行得也很好。但是，当内容超过视口宽度时，它可能会有一些奇怪的地方。在这种情况下，窗口底部的滚动条被移出视口的一半，并且很难识别/到达。如果合适的话，可以使用body { margin: 0; }来避免这种情况。在不能添加CSS的情况下，包装器元素很有用，因为滚动条总是完全可见的。
找到下面的屏幕截图：
https://stackoverflow.com/questions/12046315
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号