5

我正在寻找一种方法来防止在 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());
   }
});

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

4

3 回答 3

7

当您快速向上滚动到顶部时，弹性浏览器会导致滚动顶部变为负数。使用 st <= 0，将确保发生这种情况时不采取任何措施。

$(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);
    }
});
于 2013-10-01T17:42:17.177 回答
2

您现在可以使用overscroll-behavior：

html, body {
  overscroll-behavior: none;
}
于 2021-12-20T14:49:58.703 回答
0

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

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

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

于 2013-02-21T03:02:21.787 回答