卡卡網(wǎng)

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

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

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

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

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

普通版判斷滾動(dòng)條上滾下滾，是時(shí)時(shí)刻刻判斷滾動(dòng)條上滾下滾，比如上滾就返回true，下滾就返回false?？瓷厦娴膱D示，滾動(dòng)條上滾下滾時(shí)控制臺(tái)輸出“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

代碼解釋：

上面兩種寫法都可以用，親測(cè)！

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

fn = fn || function() {};

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

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

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

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

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

2、判斷滑輪上滾下滾 

這種方法是通過判斷滑輪上滑下滑，來判斷滾動(dòng)條上滾下滾。

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

這種方法還不能應(yīng)用于手機(jī)上，在手機(jī)上滑動(dòng)時(shí)根本獲取不到上滑下滑的狀態(tài)。如圖所示（鼠標(biāo)滾動(dòng)監(jiān)控沒出現(xiàn)up/down狀態(tài)標(biāo)識(shí)）：

所以，這種通過判斷滑輪上滑下滑的方法是有很大的使用局限性的。

最后附上判斷滑輪上滑下滑的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");
             }
         }
}
//給頁(yè)面綁定滑輪滾動(dòng)事件 
 if (document.addEventListener) {
     document.addEventListener('DOMMouseScroll', scrollFunc, false);
 }
 window.onmousewheel = document.onmousewheel = scrollFunc;

demodownload

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

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

判斷滾動(dòng)條上滾下滾(加強(qiáng)版) ，其實(shí)是在第一種方法的基礎(chǔ)上，做了一些改進(jìn)，思路是，它在滾動(dòng)條持續(xù)下滑或上滑時(shí)，只執(zhí)行一次，避免（第一種方法）時(shí)刻判斷下滑上滑從而不斷執(zhí)行顯示/隱藏導(dǎo)航條的代碼。我們看上圖的控制臺(tái)輸出，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滑動(dòng),上滑和下滑只執(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é)

本文通過親測(cè)！詳細(xì)介紹了JS判斷滾動(dòng)條上滾下滾的三種方法，明白這幾種方法之間的區(qū)別，以及它們的使用局限。第一種方法代碼少簡(jiǎn)單明了，推薦使用，不過據(jù)說在蘋果手機(jī)使用效果欠佳（本人未經(jīng)測(cè)試），第二種方法使用有很大的局限性，不建議使用，而第三種方法是第一種方法的加強(qiáng)版，使用效果可以在各種手機(jī)上表現(xiàn)良好，但代碼略像繁瑣。

文章推薦

• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡(jiǎn)繁體轉(zhuǎn)換【演示-源碼下載】
• jQuery find("#id")與find(".class")實(shí)例分析與比較
• JQuery計(jì)算HTML元素子元素(child elements)
• 鼠標(biāo)點(diǎn)擊輸入框時(shí)高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】
• JQuery使用append()函數(shù)動(dòng)態(tài)創(chuàng)建和應(yīng)用CSS樣式
• JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
• $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解

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

標(biāo)簽: 滾動(dòng)條