這篇文章將為大家詳細講解有關(guān)js如何監(jiān)聽html頁面的上下滾動事件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的洛龍網(wǎng)站建設(shè)公司，洛龍接單;提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行洛龍網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

最近在一個項目中，在寫前端頁面的時候，想像以前做Android時在頁面時刻監(jiān)聽上下滾動的事件，查找資料發(fā)現(xiàn)由鼠標或類似用戶動作觸發(fā)的事件有以下圖示：

不多說了，直接上代碼了，經(jīng)過測試可以使用：

 
  
  
   

   function scroll(){
    //console.log("打印log日志");實時看下效果
    console.log("開始滾動！");
   }

   var scrollFunc = function (e) { 
    e = e || window.event; 
    if (e.wheelDelta) { //第一步：先判斷瀏覽器IE，谷歌滑輪事件    
     if (e.wheelDelta > 0) { //當(dāng)滑輪向上滾動時 
      console.log("滑輪向上滾動"); 
     } 
     if (e.wheelDelta < 0) { //當(dāng)滑輪向下滾動時 
      console.log("滑輪向下滾動"); 
     } 
    } else if (e.detail) { //Firefox滑輪事件 
     if (e.detail> 0) { //當(dāng)滑輪向上滾動時 
      console.log("滑輪向上滾動"); 
     } 
     if (e.detail< 0) { //當(dāng)滑輪向下滾動時 
      console.log("滑輪向下滾動"); 
     } 
    } 
   }
   //給頁面綁定滑輪滾動事件 
   if (document.addEventListener) {//firefox 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
   } 
   //滾動滑輪觸發(fā)scrollFunc方法 //ie 谷歌 
   window.onmousewheel = document.onmousewheel = scrollFunc;