javascript - 在 iOS 的 Safari 中向上滚动到最顶部会导致向上/向下滚动检测出现问题

Question

我有以下 Javascript 代码:

$(window).scroll(function() {
    if (window.innerWidth <= 768) {
        let scrollStatus = $(this).scrollTop();

        if (scrollStatus > lastScrollTop) {
            //do some stuffs

        else
            //do some other stuffs

        lastScrollTop = scrollStatus;
    }
});

因此它适用于非移动设备和 Android 设备。然而，当我在 iOS 的 Safari 上运行它并滚动到最顶部时，它会稍微向下拖动视口(viewport)，然后在我松开手指时又弹回来。上面的 Javascript 代码将检测到向上滚动的反弹，并导致在 else 部分上触发，这是不希望的。我该如何解决这个问题？

Answer 1

在弹回之前，Safari 将 Y 位置过度滚动到负区域。您可以使用它来忽略弹跳动画的位置变化。

窗口滚动事件触发得非常快。出于性能原因，您不想直接处理这些事件。

下面的示例展示了如何以 250 毫秒的间隔检查用户是否滚动，这在性能上很容易。

var didScroll = false;

$(window).scroll(function() {
  didScroll = true;
});

// interval scroll handler
setInterval(function() {
  if ( didScroll ) {
    didScroll = false;
    scrolled();
  }
}, 250);

var lastScrollTop = 0;

function scrolled() {
  var scrollStatus = window.pageYOffset;

  if (scrollStatus < lastScrollTop) {
      //user scrolled up
  } else if ( lastScrollTop >= 0) {
      //user scrolled down
  }
  lastScrollTop = scrollStatus;
}

或者，您可以通过重置仅在滚动完成后调用 scrolled() 函数的超时来缓解性能问题。

var timer;

$(window).scroll(function() {
  if ( timer ) clearTimeout(timer);
  timer = setTimeout(function(){
    scrolled();
  }, 100);
});

var lastScrollTop = 0;

function scrolled() {
  var scrollStatus = window.pageYOffset;

  if (scrollStatus < lastScrollTop) {
      //user scrolled up
  } else if ( lastScrollTop >= 0) {
      //user scrolled down
  }
  lastScrollTop = scrollStatus;
}