JavaScript判断页面滚动方向的三种方法

window.addEventListener('scroll', function() {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  if (currentScroll > lastScrollTop) {
    // 向下滚动
    console.log('向下滚动');
  } else if (currentScroll < lastScrollTop) {
    // 向上滚动
    console.log('向上滚动');
  }
  
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}, false);

window.addEventListener('scroll', function() {
  const currentScrollPosition = window.pageYOffset;
  const scrollDelta = currentScrollPosition - lastScrollPosition;
  
  if (scrollDelta > 0) {
    console.log('向下滚动', scrollDelta);
  } else if (scrollDelta < 0) {
    console.log('向上滚动', scrollDelta);
  }
  
  lastScrollPosition = currentScrollPosition;
});

let ticking = false;

window.addEventListener('scroll', function() {
  lastKnownScrollPosition = window.scrollY;
  
  if (!ticking) {
    window.requestAnimationFrame(function() {
      const current = lastKnownScrollPosition;
      const direction = current > (lastKnownScrollPosition || 0) ? 'down' : 'up';
      console.log(direction);
      ticking = false;
    });
    
    ticking = true;
  }
});

// 获得滚动的像素数
const intElemScrollTop = element.scrollTop;

// 设置滚动的距离
element.scrollTop = intValue;

window.pageYOffset === window.scrollY; // true

const useScrollTop = () => {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}