快捷導(dǎo)航

js監(jiān)聽html頁面的上下滾動(dòng)事件方法

更新時(shí)間：2018年09月11日 15:03:39 作者：--LIANG--

今天小編就為大家分享一篇js監(jiān)聽html頁面的上下滾動(dòng)事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Dome</title>
  <script type="text/javascript"> 

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

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


  </script> 

 </head>
 <body onscroll="scroll()">
  <div style="height: 2000px;background-color: aqua;"></div>
 </body>
</html>

如果有沒有使用過console.log(“”)的，我這里截下圖看下吧（谷歌瀏覽器）：

以上這篇js監(jiān)聽html頁面的上下滾動(dòng)事件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景
在行走江湖的過程中,會(huì)出現(xiàn)很多性能優(yōu)化的問題來讓你手足無措,那么這篇文章主要給大家介紹了關(guān)于JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景,針對(duì)這兩個(gè)問題來為你答疑解惑,需要的朋友可以參考下
2021-07-07
深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this
這篇文章主要介紹了深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this，arguments是一個(gè)類數(shù)組結(jié)構(gòu)，它保存了調(diào)用時(shí)傳遞給函數(shù)的所有實(shí)參；this是函數(shù)執(zhí)行時(shí)的上下文對(duì)象, 這個(gè)對(duì)象有些讓人感到困惑的行為。下面分別對(duì)他們進(jìn)行討論。,需要的朋友可以參考下
2019-06-06
基于OO的動(dòng)畫附加插件,可以實(shí)現(xiàn)彈跳、漸隱等動(dòng)畫效果分享
基于OO的動(dòng)畫附加插件,可以實(shí)現(xiàn)彈跳、漸隱等動(dòng)畫效果分享，需要的朋友可以參考一下
2013-06-06
jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child()，是CSS3中的一個(gè)偽類選擇符，JQuery選擇器繼承了CSS的部分語法，允許通過標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇。
2023-03-03
js中的面向?qū)ο笕腴T
本文主要介紹了js中的面向?qū)ο蟮南嚓P(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
原生js+cookie實(shí)現(xiàn)購物車功能的方法分析
這篇文章主要介紹了原生js+cookie實(shí)現(xiàn)購物車功能的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合cookie存儲(chǔ)實(shí)現(xiàn)購物車功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)餐效果
一款十分簡單的原生js實(shí)現(xiàn)的隨機(jī)點(diǎn)菜代碼，點(diǎn)擊點(diǎn)菜按鈕隨機(jī)點(diǎn)取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機(jī)點(diǎn)名。感興趣的朋友來參考實(shí)現(xiàn)代碼吧
2019-12-12
JavaScript實(shí)現(xiàn)非常簡單實(shí)用的下拉菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)非常簡單實(shí)用的下拉菜單效果,通過定義顯示及隱藏菜單項(xiàng)及鼠標(biāo)事件調(diào)用該函數(shù)實(shí)現(xiàn)下拉菜單功能,需要的朋友可以參考下
2015-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
js實(shí)現(xiàn)京東輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06