JavaScript判斷頁面滾動方向的三種方法
更新時(shí)間：2025年04月21日 10:45:32 作者：Muxxi
這篇文章主要介紹了JavaScript判斷頁面滾動方向的三種方法：使用變量記錄、使用更精確的 delta 值判斷和使用 requestAnimationFrame 優(yōu)化性能,并通過代碼講解的非常詳細(xì),需要的朋友可以參考下
方法一：使用變量記錄上次滾動位置
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è)置一個(gè)元素的內(nèi)容垂直滾動的像素?cái)?shù)。
// 獲得滾動的像素?cái)?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)文章
這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)簡單文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
細(xì)數(shù)JavaScript 一個(gè)等號,兩個(gè)等號,三個(gè)等號的區(qū)別
下面小編就為大家?guī)硪黄?xì)數(shù)JavaScript 一個(gè)等號,兩個(gè)等號,三個(gè)等號的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JavaScript 手動實(shí)現(xiàn)instanceof的方法
instanceof運(yùn)算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對象的原型鏈上，本文重點(diǎn)給大家介紹JavaScript手動實(shí)現(xiàn)instanceof的問題，感興趣的朋友跟隨小編一起看看吧2021-10-10
關(guān)于ECharts設(shè)置x軸刻度間隔的兩種方式
這篇文章主要介紹了關(guān)于ECharts設(shè)置x軸刻度間隔的兩種方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
textarea不能通過maxlength屬性來限制字?jǐn)?shù)的解決方法
textarea稱文本域，又稱文本區(qū)，其不能通過maxlength屬性來限制字?jǐn)?shù)，為此必須尋求其他方法來加以限制以達(dá)到預(yù)設(shè)的需求2014-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽取三人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
ES6初步了解原始數(shù)據(jù)類型Symbol的用法
ES6中為我們新增了一個(gè)原始數(shù)據(jù)類型Symbol,大家是否知道Symbol可以作用在哪?用來定義對象的私有變量如何寫入對象,本文對ES6 Symbol的用法介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
alert中斷settimeout計(jì)時(shí)功能
在測試過程中發(fā)現(xiàn)alert會中斷settimeout的計(jì)時(shí)功能,關(guān)閉對話框后，settimeout的時(shí)間會重頭開始計(jì)時(shí)，而不是從中斷處，感興趣的朋友可以了解下2013-07-07
javascript 圖片上傳預(yù)覽-兼容標(biāo)準(zhǔn)
js圖片上傳預(yù)覽2009-06-06
javascript實(shí)現(xiàn)貪吃蛇小游戲思路
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇思路小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09