禁用弹性滚动 Chrome/Safari答案

【问题标题】：Disable Elastic Scrolling Chrome/Safari禁用弹性滚动 Chrome/Safari
【发布时间】：2016-01-14 20:25:53
【问题描述】：

This method 对我根本不起作用。

有没有更新的现代方式来做到这一点？

我的客户总是讨厌它，我还没有找到禁用它的好方法。

弹性滚动是指一旦您到达页面的顶部或底部，这些浏览器就会允许页面“过度滚动”以显示空白区域。我正在努力阻止这种行为。

【问题讨论】：

使用 JS。 stackoverflow.com/questions/14993804/…
或者类似的东西jsfiddle.net/Volker_E/jwGBy/24
来自这个答案stackoverflow.com/a/15138275/4807777

标签： google-chrome safari webkit

【解决方案1】：

如果 CSS hack 在您的情况下没有删除它，那么您可能需要使用 JS 来处理滚动。

我强烈建议不要这样做，因为用户希望滚动以某种方式表现。更不用说让 JS 滚动变得流畅并像原生滚动一样响应灵敏是非常困难的。

我不知道您正在构建什么，因此这当然可能不适用于您的情况，但您通常应该（如始终，除非您有令人信服的理由）将此类常见交互留给操作系统以避免混淆用户。您的客户可能不喜欢它，但这是他们的用户所期望的，这应该更重要。

【讨论】：

【解决方案2】：

这是一种为 chrome 禁用它的方法

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

发件人：https://developers.google.com/web/updates/2017/11/overscroll-behavior

【讨论】：

【解决方案3】：

现代浏览器可能已经发生了变化（我以为我几年前就已经解决了这个问题，但是来自旧项目的技术不再适用）但这是我现在使用的，没有足够严重的用户或个人抱怨来探索 JavaScript 滚动-event-foo:

<style>
    html, body {
        overscroll-behavior: none;

        /* nothing special */
        margin: 0; padding: 0;
        background-color: #000000; /* anything on-theme */
    }
    .scrollBody {
        display: block;
        height: 100vh; /* 100% does not do it */
        overflow: scroll;
        overscroll-behavior: contain;
    }
</style>
<body>
    <div class='scrollBody'>
        <!-- everything else -->
    </div>
</body>

基本上，分配和限制滚动到正文内的元素。如果用户在固定或绝对元素（如页眉或页脚区域）上开始手势，您仍然可能会遇到橡皮筋，因此至少在主题上设置 <body> 颜色以尽量减少它的明显程度。

目前在 Chrome、Safari 和 Edge 中测试良好（在带有触摸板的 macOS 上，可能是一个因素），如果您在其他环境中使用它，可能是一个入门线索/方法。

【讨论】：