Chrome 中的“橡皮筋”滚动问题答案

【问题标题】：Issue with "rubber-band" scrolling in ChromeChrome 中的“橡皮筋”滚动问题
【发布时间】：2014-03-06 07:57:38
【问题描述】：

在我的网页上，我有一个元素 $('.detailViewHandle') 可以根据窗口的滚动位置调整其位置。由于弹性滚动（我也将其称为“橡皮筋”滚动），我遇到了问题；如果用户滚动的速度非常快，超出了页面的限制，元素的定位就会被抛出。我试图通过检查以下条件来解释用户滚动超出页面限制的时间：

$(window).scrollTop() > 0

$(window).scrollTop() + $(window).height() < $(document).height()

这是完整的代码：

$(window).scroll(function(){
  var offset = 332;
  var scrollTop = $(window).scrollTop();
  var scrollBottom = $(window).scrollTop() + $(window).height();
  if(scrollTop > 0 && scrollBottom < $(document).height()){
      $('.detailViewHandle').css('top', $(window).height()-$(window).scrollTop()-$('.projectOverviewPhoto').height()+$('.detailViewHandle').height()/2-offset);
  }
});

有没有办法在 OSX 上的 Chrome 中完全禁用弹性滚动？我在 Firefox 中似乎没有这个问题。

我也不能为 body 和 html 设置 overflow:hidden（我在其他回复中看到过），因为我要求溢出对于部分页面是可见的。

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

它最终是一个非常简单的修复。事实证明，滚动有一些滞后，所以 scrollTop 可能会从 150 跳到 0。这让我的 div 在页面上的错误位置。通过设置条件以在 scrollTop >= 0 时响应，我能够解决问题。

if(scrollTop >= 0 && scrollBottom <= $(document).height()){

【讨论】：