防止 OS X Chrome 和 Safari 上的弹性滚动答案

【问题标题】：Preventing elastic scrolling on OS X Chrome and Safari防止 OS X Chrome 和 Safari 上的弹性滚动
【发布时间】：2021-12-20 23:08:44
【问题描述】：

我正在寻找一种方法来防止在 Chrome 和 Safari 中出现在 OS X 上的弹性滚动。

如果你不明白我的意思，那就是当你在页面顶部时向上滚动，或者在页面底部时向下滚动，它会在页面后面显示灰色背景。

有一个针对单页应用的 css 解决方案，您只需将 overflow:hidden 添加到 html 或 body 即可

但是，我需要能够滚动。

我想出了一个使用 Javascript (JQuery) 的解决方案，但它仅适用于滚动通过顶部，并且仅适用于 chrome。此外，它在 Safari 中有点问题。

$(window).on('scroll', function(e){
   scrollAmount = $(this).scrollTop();
   if(scrollAmount < 1){
      $(this).scrollTop(1);
   }
});

所以这只是检查用户滚动到 1 以下，这意味着他们尝试向上滚动到页面结束的地方。我尝试了 0 但这没有用。我一直无法找到一种方法来检查用户是否滚动通过了页面底部。

有什么想法吗？

编辑：

$(window).on('scroll', function(e){
   scrollAmount = $(this).scrollTop();
   if(scrollAmount < 1){
      $(this).scrollTop(1);
   }
   if(scrollAmount > $(document).height() - $(window).height()){
      $(this).scrollTop($(window).height());
   }
});

现在我添加了一项检查，以检查我们是否滚动到页面底部。但是这种方法不起作用，它非常不优雅地弹跳。

【问题讨论】：

您有这样做的理由吗？我发现那一点 UI 是一个明确的指标，表明我不再需要滚动，而且它仍在工作（即没有冻结）。人们不会无缘无故地考虑这些事情。
我也想问你为什么要这样做。如果用户不希望这种行为，it is possible to disable it（不幸的是，不是通过 UI）。如果您确实强制执行此操作，请测试人们已将其关闭的情况！
我正在制作一个根据滚动量发生事情的网站。当用户滚动到页面末尾时，它会导致事情看起来有点不稳定。不是一个大错误，但我正在努力让事情看起来非常可靠。

标签： javascript jquery css

【解决方案1】：

当您快速向上滚动到顶部时，弹性浏览器会导致滚动顶部变为负数。使用 st

$(window).on('scroll',function(){
    var dh = $(document).height(),
        wh = $(window).height(),
        st = $(window).scrollTop();
    if (st <= 0) {
        $(this).scrollTop(0);
    } else if (st + wh >= dh) {
        $(this).scrollTop(dh);
    }
});

【讨论】：

也许你可以用一两句话来解释你的解决方案。我个人可以接受，但“SO 社区”不喜欢纯代码的答案。

【解决方案2】：

您现在可以使用overscroll-behavior：

html, body {
  overscroll-behavior: none;
}

【讨论】：

道歉 - 我确实看错了！

【解决方案3】：

虽然我不喜欢这种方法，但您可以使用 jQuery 来获取文档高度（因此使用 $(document).height(); 获取页面底部的滚动距离）

另一种方法是使用<div id="preventScroll"></div> 包装器包装整个页面，并使用属性overflow: scroll; height: 100%; width: 100%;

这将是一个单独的滚动设备，可以防止您的整个问题。

【讨论】：

这并不准确。文档的高度与您滚动的量无关。
你能证明这个方法吗？是什么阻止了包装器被滚动？当其内容位于顶部或底部并且用户以各自的方式拉动没有更多内容时，包装器仍应拉动其内容以显示 OP 想要隐藏的空白。编辑：哦，溢出滚动可能会起作用。
Popnoodles：是的，有道理。我还没有测试过（现在在 PC 上）。
Kolby，$(document).height() - $(window).height()（视口高度）应该可以满足您的需求。因为它不能再滚动了。
我想这正是我想要的，让我测试一下，谢谢。此外，此方法在 safari 中不起作用。