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)文章
js實現(xiàn)小球在頁面規(guī)定的區(qū)域運動
這篇文章主要為大家詳細介紹了js控制小球在規(guī)定范圍運動,碰到邊界就改變運動方向,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06
js統(tǒng)計錄入文本框中字符的個數(shù)并加以限制不超過多少
為了更直觀的體現(xiàn)用戶在文本框輸入文本時能看到自己輸入了多少字,并且有些特殊的要求字數(shù)不超過多少,本文給出了具體的實現(xiàn)2014-05-05
一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉(zhuǎn)成Markdown,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08

