防止在OS X Chrome和Safari上进行弹性滚动

Question

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

现在我已经添加了一个检查,如果我们滚动浏览页面的底部.这种方法不起作用,它非常不合理地弹跳.

Answer 1

您现在可以使用overscroll-behavior：

html, body {
  overscroll-behavior: none;
}

Answer 2

当您快速向上滚动到顶部时,弹性浏览器会使滚动顶部变为负数.使用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);
    }
});

Answer 3

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

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

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