防止在OS X Chrome和Safari上弹性滚动 [英] Preventing elastic scrolling on OS X Chrome and Safari

问题描述

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

I'm looking for a way to prevent the elastic scrolling that occurs on OS X in both Chrome and Safari.

如果你不明白我的意思，当页面在顶部时向上滚动，或当页面在底部时向下滚动，并在页面后面显示一个灰色背景。

If you don't understand what I mean, it's when you scroll up while the page is at the top, or down when the page is at the bottom, and it shows a gray background behind the page.

是单页应用程序的CSS解决方案，您只需将 overflow：hidden 添加到 html 或 body

There is a css solution for single page apps where you just add overflow:hidden to the html or body

我需要能够滚动。

使用Javascript（JQuery）提出了一个解决方案，但它只是用于滚动传递的顶部，只适用于chrome。

I've come up with a solution using Javascript (JQuery), but it's only for scrolling passed the top, and only works for chrome. Also, it's a bit buggy in Safari.

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

所以这只是检查用户滚动下面1意味着他们试图向上滚动页面结束。我试过0，但没有工作。
我找不到一个方法来检查用户是否滚动到页面底部。

So that's just checking of the user scrolls below 1 meaning they try to scroll up passed where the page ends. I tried 0 but that didn't work. I haven't been able to find a way to check if the user scrolls passed the bottom of the page.

有什么想法吗？

编辑：

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

现在我添加了一个检查，如果我们滚动超过页面底部。这个方法不工作，但它非常不正常地弹跳。

Now I've added a check for if we scroll passed the bottom of the page. This method is not working though, it's bouncing around very ungracefully.

推荐答案

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

While I dislike the methodology. If you are going to use jQuery, you can get the document height (and thus the bottom of the page for the scroll distance using $(document).height();)

另一种方法是使用具有溢出属性的wrapper包装整个页面：scroll;高度：100％; width：100％;

Another method would be to wrap the entire page with a wrapper with the property overflow: scroll; height: 100%; width: 100%;

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

That would be a separate scrolling device and prevent your whole issue.

这篇关于防止在OS X Chrome和Safari上弹性滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！