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

当您快速向上滚动到顶部时，弹性浏览器会使滚动顶部变为负值。使用st＆lt; = 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 2

虽然我不喜欢这种方法。如果你打算使用jQuery，你可以使用$（document）.height（）;来获取文档高度（因此可以获得滚动距离的页面底部）。

另一种方法是使用包含属性overflow：scroll;的包装器封装整个页面;身高：100％;宽度：100％;

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

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

2 个答案: