javascript - 在 Chrome 中滚动时出现 "rubber-band"问题

Question

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

$(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 中完全禁用 flex 滚动？我在 Firefox 中似乎没有这个问题。

我也无法为 body 和 html 设置 overflow:hidden(我在其他响应中看到过)，因为我要求页面的一部分可见溢出。

Answer 1

它最终成为一个非常简单的修复程序。事实证明滚动有一些滞后，因此 scrollTop 可能会从 150 跳到 0。这使我的 div 在页面上处于错误的位置。通过将条件设置为在 scrollTop >= 0 时响应，我能够解决该问题。

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