防止网页“过度滚动”

在Mac版Chrome中，如下面的屏幕截图所示，可以“翻转”页面（缺less更好的词），以查看“后面的内容”，类似于iPad或iPhone。

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

我怎样才能禁用“overscrolling”？ 还有其他方法可以控制“过度滚动”吗？

Answer 1

接受的解决scheme不适合我。 我仍然能够滚动的唯一方法是：

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

Answer 2

一种可以防止这种情况的方法是使用下面的CSS：

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

这种方式身体从来没有任何溢出，并不会在页面的顶部和底部滚动时“反弹”。 容器将完美地滚动其内容。 这适用于Safari和Chrome。

编辑

为什么额外的<div>元素作为包装可能是有用的：
Florian Feldhaus的解决scheme使用的代码稍less，工作也很好。 但是，当涉及超过视口宽度的内容时，它可能会有一些小小的偏差。 在这种情况下，窗口底部的滚动条会从视口中移出一半，很难识别/到达。 这可以避免使用body { margin: 0; } 如果合适的话。 在无法添加此CSS的情况下，包装元素非常有用，因为滚动条总是可见的。

find下面的截图：

Answer 3

试试这个方法

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

Answer 4

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

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

Answer 5

position: absolute为我工作。 我已经在Chrome 50.0.2661.75 (64-bit)和OSX上testing过。

 body { overflow: hidden; } // position is important #element { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } 

Answer 6

这里有一个美丽的文章。

我发现这在Chrome上适合我。 万一网页发生故障，我将总结一下：

1. 开放的terminal
2. inputdefaults write -g NSScrollViewRubberbanding -int 0
3. Chrome重新启动

Answer 7

还要确保你的页面不超过一定的分辨率。

例如：

• 1280×1024
• 1024×768
• 800×700

我这样做的好方法是，我通常遵循的是1024×768，并使您的最长980px 。

build立一个分辨率为1024×768的网站是有益的，因为浏览网页的大多数浏览器都是> = 1024×768（如w3所示）。

确保div始终位于中心。 这很容易：

 .div{ width:1024px; margin:0px auto; /* this aligns the 'div' to ALWAYS be in the center */ }