亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript判斷頁面滾動方向的三種方法

 更新時間：2025年04月21日 10:45:32   作者：Muxxi  
這篇文章主要介紹了JavaScript判斷頁面滾動方向的三種方法：使用變量記錄、使用更精確的 delta 值判斷和使用 requestAnimationFrame 優(yōu)化性能,并通過代碼講解的非常詳細,需要的朋友可以參考下

方法一：使用變量記錄上次滾動位置

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);

方法二：使用更精確的 delta 值判斷

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;
});

方法三：使用 requestAnimationFrame 優(yōu)化性能

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;
  }
});

拓展：JS獲取頁面滾動距離

1，element.scrollTop

獲取或設(shè)置一個元素的內(nèi)容垂直滾動的像素數(shù)。

// 獲得滾動的像素數(shù)
const intElemScrollTop = element.scrollTop;

// 設(shè)置滾動的距離
element.scrollTop = intValue;

2，window.scrollY 和 window.pageYOffset

返回文檔在垂直方向已滾動的像素值。但 window.pageYOffset 兼容性更好。

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

3，獲取頁面滾動距離

最兼容性的寫法：

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

這也是 skrollr 庫使用的寫法。

到此這篇關(guān)于JavaScript判斷頁面滾動方向的三種方法的文章就介紹到這了,更多相關(guān)JS判斷頁面滾動方向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論