Прокрутка до самого верха в 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 и прокрутил до самого верха, он немного тянет вниз область просмотра, прежде чем отскочить назад, когда я освобождаю палец. Этот отскок вверх обнаруживается вышеуказанным кодом 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;
}