防止网页“过度滚动”

在 Mac 版 Chrome 浏览器中，你可以“超滚动”一个页面(因为没有更好的词) ，如下面的截图所示，查看“后面是什么”，类似于 iPad 或 iPhone。

我注意到有些页面禁用了它，比如 gmail 和“新标签”页面。

如何禁用“超滚动”? 是否有其他方法可以控制“超滚动”？

enter image description here

124247 次浏览
小开

防止这种情况发生的一个方法是使用以下 CSS:

html, body {
width: 100%;
height: 100%;
overflow: hidden;
}


body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

这样，主体从来没有任何溢出，也不会在页面顶部和底部滚动时“反弹”。容器将完美地滚动其内部的内容。这可以在 Safari 和 Chrome 中使用。

剪辑

为什么额外的 <div>元素作为包装器是有用的: < br > Florian Feldhaus 的解决方案使用的代码略少，工作也很好。但是，当涉及到超过视窗宽度的内容时，它可能会有一点怪异。在这种情况下，位于窗口底部的滚动条在视图中途被移出，并且很难识别/到达。如果合适，可以使用 body { margin: 0; }避免这种情况。在不能添加 CSS 的情况下，包装器元素非常有用，因为滚动条总是完全可见的。

下面是一个截图: enter image description here

小开
最佳答案

被接受的解决方案对我不起作用。我能让它工作的唯一方法就是:

html {
overflow: hidden;
height: 100%;
}


body {
height: 100%;
overflow: auto;
}
小开

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;
}
小开

试试这边

body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
小开

您可以使用此代码删除 touchmove预定义的操作:

document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
小开

反弹效果不能被禁用，除非网页的高度等于 window.innerHeight，你可以让你的子元素滚动。

html {
overflow: hidden;
}
小开

在 Chrome 63 + 、 Firefox 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 63 + 、 Firefox 59 + 和 Opera 50 + 都支持它。Edge 公开支持它，而 Safari 是未知的。在 MDN 文档跟踪进度 给你和当前浏览器兼容性

更多信息

小开 
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}

提交答案