|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【親測！3種方法】JS判斷滾動條上滾下滾
作者:admin 時間:2022-4-25 7:7:26 瀏覽:本文通過本人親自測試代碼可用，給大家分享3種方法，JS判斷滾動條上滾下滾。這3種方法出來的效果是有所區(qū)別的，內(nèi)文會詳細介紹。
通過代碼測試的瀏覽器有：Chrome、Firefox、IE11、安卓手機UC。
代碼調(diào)試花了不少時間，網(wǎng)上流傳的的代碼大多是不可用的，大部分人都是復(fù)制粘貼無經(jīng)測試。
1、判斷滾動條上滾下滾(普通版)
首先介紹的是第一種方法，判斷滾動條上滾下滾(普通版)，說是普通版，其實是與后面的加強版區(qū)分而已。加強版是是在普通版代碼的基礎(chǔ)上做了一些改進。
普通版判斷滾動條上滾下滾，是時時刻刻判斷滾動條上滾下滾，比如上滾就返回true，下滾就返回false?？瓷厦娴膱D示，滾動條上滾下滾時控制臺輸出“down”和“up”前面數(shù)字的快速變化，可以看出代碼執(zhí)行的次數(shù)是非常之多的。
JS代碼如下：
function scroll( fn ) {
var beforeScrollTop = $(this).scrollTop(),
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = $(this).scrollTop(),
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
//第一種寫法
scroll(function(direction) {
console.log(direction);
});
//第二種寫法執(zhí)行完事件后的回調(diào)函數(shù)
/*
function fn(direction) {
console.log(direction); //down or up
};
window.onscroll=function(){
scroll( fn );
}
*/代碼解釋：
上面兩種寫法都可以用，親測！
代碼實現(xiàn)思路是獲得滾動條滾動前后兩次的位置，通過對比判斷上滾還是下滾。$(this).scrollTop() 是獲得滾動條位置的代碼，注意，這個是滾動條頂部相對于文檔的位置而不是相對于窗口的位置。請看一圖理解$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系。
fn = fn || function() {};
代碼中使用了一句 fn = fn || function() {}; ，這是什么意思呢？
|| 符號意思是，如果左邊的為假，則整個返回值為右邊的表達式；如果左邊為真，則返回值為左邊的表達式。
所以如果fn為真，那么fn = fn；否則，給fn一個空函數(shù)。
|| 通常用來給定默認值。&& 通常用來避免某個對象undefined時，繼續(xù)取他的值。
someObj && someObj.someFunc 意思是，如果 someObj 存在，整個表達式為someObj.someFunc。
2、判斷滑輪上滾下滾
這種方法是通過判斷滑輪上滑下滑，來判斷滾動條上滾下滾。
這種方法有很大的使用局限性，當(dāng)用鼠標(biāo)拖動滾動條時，該方法就失效了。如下圖所示，判斷不出滾動條上下滾動（鼠標(biāo)滾動監(jiān)控沒出現(xiàn)up/down狀態(tài)標(biāo)識，控制臺沒輸出）。
這種方法還不能應(yīng)用于手機上，在手機上滑動時根本獲取不到上滑下滑的狀態(tài)。如圖所示（鼠標(biāo)滾動監(jiān)控沒出現(xiàn)up/down狀態(tài)標(biāo)識）：
所以，這種通過判斷滑輪上滑下滑的方法是有很大的使用局限性的。
最后附上判斷滑輪上滑下滑的JS代碼：
var scrollFunc = function(e) {
e = e || window.event;
//先判斷瀏覽器IE，谷歌滑輪事件
if (e.wheelDelta) {
if (e.wheelDelta > 0) {
console.log("up");
}
if (e.wheelDelta < 0) {
console.log("down");
}
//Firefox滑輪事件
} else if (e.detail) {
if (e.detail > 0) {
console.log("down");
}
if (e.detail < 0) {
console.log("up");
}
}
}
//給頁面綁定滑輪滾動事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
window.onmousewheel = document.onmousewheel = scrollFunc;3、判斷滾動條上滾下滾(加強版)
據(jù)說第一種方法在蘋果手機使用效果欠佳（通過滾動條上滑下滑顯示隱藏導(dǎo)航條有跳動現(xiàn)象），于是就有了加強版出來。
判斷滾動條上滾下滾(加強版) ，其實是在第一種方法的基礎(chǔ)上，做了一些改進，思路是，它在滾動條持續(xù)下滑或上滑時，只執(zhí)行一次，避免（第一種方法）時刻判斷下滑上滑從而不斷執(zhí)行顯示/隱藏導(dǎo)航條的代碼。我們看上圖的控制臺輸出，down和up前面是沒有數(shù)字的，數(shù)字代表代碼的執(zhí)行次數(shù)。
JS代碼如下：
function scrollDirect(fn) {
var beforeScrollTop = $(this).scrollTop();
fn = fn || function() {};
window.addEventListener("scroll", function(event) {
event = event || window.event;
var afterScrollTop = $(this).scrollTop();
delta = afterScrollTop - beforeScrollTop;
beforeScrollTop = afterScrollTop;
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height() - 10) {
fn('up');
} else {
if (Math.abs(delta) < 10) {
return false;
}
fn(delta > 0 ? "down" : "up");
}
}, false);
}
var upflag = 1;
var downflag = 1;
//scroll滑動,上滑和下滑只執(zhí)行一次！
scrollDirect(function(direction) {
if (direction == "down") {
if (downflag) {
console.log("down");
downflag = 0;
upflag = 1;
}
}
if (direction == "up") {
if (upflag) {
console.log("up");
downflag = 1;
upflag = 0;
}
}
});總結(jié)
本文通過親測！詳細介紹了JS判斷滾動條上滾下滾的三種方法，明白這幾種方法之間的區(qū)別，以及它們的使用局限。第一種方法代碼少簡單明了，推薦使用，不過據(jù)說在蘋果手機使用效果欠佳（本人未經(jīng)測試），第二種方法使用有很大的局限性，不建議使用，而第三種方法是第一種方法的加強版，使用效果可以在各種手機上表現(xiàn)良好，但代碼略像繁瑣。
文章推薦
- jQuery $('document').on() 比 $('body').on() 速度快
- JS中文簡繁體轉(zhuǎn)換【演示-源碼下載】
- jQuery find("#id")與find(".class")實例分析與比較
- JQuery計算HTML元素子元素(child elements)
- 鼠標(biāo)點擊輸入框時高亮顯示邊框顏色【jquery和css實現(xiàn)】
- JQuery使用append()函數(shù)動態(tài)創(chuàng)建和應(yīng)用CSS樣式
- JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
- $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解
標(biāo)簽: 滾動條
- 站長推薦
