logo标签列表

禁用Chrome/Safari的弹性滚动

google-chromesafariwebkit
7

这种方法 对我来说根本不起作用。

有没有更现代化的更新方法？

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

所谓弹性滚动，是指一旦您到达页面的顶部或底部，这些浏览器允许页面“超滚”以显示空白区域。我正在尝试防止这种行为。

使用JS。https://dev59.com/JW7Xa4cB1Zd3GeqPs7r- - Laurentiu L.
或者可能是这样的 http://jsfiddle.net/Volker_E/jwGBy/24/ - Laurentiu L.
从这个答案 https://dev59.com/cWUp5IYBdhLWcg3wrI3T#15138275 - Laurentiu L.
4个回答
3
这里有一种方法可以在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

本文介绍了一种名为“overscroll-behavior”的CSS属性，它可以控制浏览器在滚动到页面边缘时的行为。默认情况下，浏览器会在到达顶部或底部时显示出反弹效果，这可能会影响用户体验。使用overscroll-behavior属性，您可以禁用此效果，或者指定其他行为，例如滚动到另一个元素。

2
如果CSS hack在您的情况下无法移除它，那么您可能需要使用JS来处理滚动。
我强烈建议不要这样做，因为用户期望滚动按照一定的方式进行。更不用说，要使JS滚动变得平滑并且像本机滚动一样反应灵敏非常困难。
我不知道您正在构建什么，当然这可能不适用于您的情况，但通常情况下（也就是说，除非您有充分的理由反对），应该将此类常见交互留给操作系统来避免让用户感到困惑。您的客户可能不喜欢这样做，但用户会期望这样做，这更加重要。
0
弹性滚动限制现在在各种浏览器中都可以使用 - 只需将未加前缀的overscoll-behaviour添加到html和body中即可。
body, html { overscroll-behavior: none; }
-1

现代浏览器可能已经发生了变化（虽然我认为几年前已经解决了这个问题，但是旧项目中的技术不再适用），但这是我现在正在使用的方法，因为没有用户或个人抱怨足够严重，需要探索JavaScript滚动事件。

<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上使用触摸板，可能是一个因素），如果你在其他环境中解决问题，这可能是一个起始提示/方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接