卡卡網(wǎng)

本文通過本人親自測試代碼可用，給大家分享3種方法，JS判斷滾動條上滾下滾。這3種方法出來的效果是有所區(qū)別的，內(nèi)文會詳細(xì)介紹。

通過代碼測試的瀏覽器有：Chrome、Firefox、IE11、安卓手機(jī)UC。
代碼調(diào)試花了不少時間，網(wǎng)上流傳的的代碼大多是不可用的，大部分人都是復(fù)制粘貼無經(jīng)測試。

1. 判斷滾動條上滾下滾(普通版)
2. 判斷滑輪上滾下滾
3. 判斷滾動條上滾下滾(加強(qiáng)版)

1、判斷滾動條上滾下滾(普通版)

首先介紹的是第一種方法，判斷滾動條上滾下滾(普通版)，說是普通版，其實是與后面的加強(qiáng)版區(qū)分而已。加強(qiáng)版是是在普通版代碼的基礎(chǔ)上做了一些改進(jìn)。

普通版判斷滾動條上滾下滾，是時時刻刻判斷滾動條上滾下滾，比如上滾就返回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 );
    }
*/

demodownload

代碼解釋：

上面兩種寫法都可以用，親測！

代碼實現(xiàn)思路是獲得滾動條滾動前后兩次的位置，通過對比判斷上滾還是下滾。$(this).scrollTop() 是獲得滾動條位置的代碼，注意，這個是滾動條頂部相對于文檔的位置而不是相對于窗口的位置。請看一圖理解$(this).scrollTop()、$(window).height()與$(document).height()關(guān)系。

fn = fn || function() {};

代碼中使用了一句 fn = fn || function() {}; ，這是什么意思呢？

|| 符號意思是，如果左邊的為假，則整個返回值為右邊的表達(dá)式；如果左邊為真，則返回值為左邊的表達(dá)式。

所以如果fn為真，那么fn = fn；否則，給fn一個空函數(shù)。

|| 通常用來給定默認(rèn)值。&& 通常用來避免某個對象undefined時，繼續(xù)取他的值。

someObj && someObj.someFunc 意思是，如果 someObj 存在，整個表達(dá)式為someObj.someFunc。

2、判斷滑輪上滾下滾 

這種方法是通過判斷滑輪上滑下滑，來判斷滾動條上滾下滾。

這種方法有很大的使用局限性，當(dāng)用鼠標(biāo)拖動滾動條時，該方法就失效了。如下圖所示，判斷不出滾動條上下滾動（鼠標(biāo)滾動監(jiān)控沒出現(xiàn)up/down狀態(tài)標(biāo)識，控制臺沒輸出）。

這種方法還不能應(yīng)用于手機(jī)上，在手機(jī)上滑動時根本獲取不到上滑下滑的狀態(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;

demodownload

3、判斷滾動條上滾下滾(加強(qiáng)版)

據(jù)說第一種方法在蘋果手機(jī)使用效果欠佳（通過滾動條上滑下滑顯示隱藏導(dǎo)航條有跳動現(xiàn)象），于是就有了加強(qiáng)版出來。

判斷滾動條上滾下滾(加強(qiáng)版) ，其實是在第一種方法的基礎(chǔ)上，做了一些改進(jìn)，思路是，它在滾動條持續(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;
           }
       }
   });

demodownload

總結(jié)

本文通過親測！詳細(xì)介紹了JS判斷滾動條上滾下滾的三種方法，明白這幾種方法之間的區(qū)別，以及它們的使用局限。第一種方法代碼少簡單明了，推薦使用，不過據(jù)說在蘋果手機(jī)使用效果欠佳（本人未經(jīng)測試），第二種方法使用有很大的局限性，不建議使用，而第三種方法是第一種方法的加強(qiáng)版，使用效果可以在各種手機(jī)上表現(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ù)詳解

• 表單序列化插件serializeJSON.js下載及使用示例
• JQuery如何把JSON字符串轉(zhuǎn)為JSON對象
• 使用HTML5和JQuery讀取CSV(Text)文件的實例
• HTML5和JQuery裁剪圖像實時預(yù)覽縮略圖并上傳
• HTML5和JQuery實現(xiàn)多圖片上傳預(yù)覽
• 使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）
• 實例：使用jQuery插件TableDnD拖放HTML表(table)行

標(biāo)簽: 滾動條