欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年09月11日 15:03:39   作者:--LIANG--  
今天小編就為大家分享一篇js監(jiān)聽html頁面的上下滾動事件方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

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

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

   var scrollFunc = function (e) { 
    e = e || window.event; 
    if (e.wheelDelta) { //第一步:先判斷瀏覽器IE,谷歌滑輪事件    
     if (e.wheelDelta > 0) { //當滑輪向上滾動時 
      console.log("滑輪向上滾動"); 
     } 
     if (e.wheelDelta < 0) { //當滑輪向下滾動時 
      console.log("滑輪向下滾動"); 
     } 
    } else if (e.detail) { //Firefox滑輪事件 
     if (e.detail> 0) { //當滑輪向上滾動時 
      console.log("滑輪向上滾動"); 
     } 
     if (e.detail< 0) { //當滑輪向下滾動時 
      console.log("滑輪向下滾動"); 
     } 
    } 
   }
   //給頁面綁定滑輪滾動事件 
   if (document.addEventListener) {//firefox 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
   } 
   //滾動滑輪觸發(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頁面的上下滾動事件方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景

    JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景

    在行走江湖的過程中,會出現(xiàn)很多性能優(yōu)化的問題來讓你手足無措,那么這篇文章主要給大家介紹了關(guān)于JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景,針對這兩個問題來為你答疑解惑,需要的朋友可以參考下
    2021-07-07
  • 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this

    深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this

    這篇文章主要介紹了 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this,arguments是一個類數(shù)組結(jié)構(gòu),它保存了調(diào)用時傳遞給函數(shù)的所有實參;this是函數(shù)執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進行討論。,需要的朋友可以參考下
    2019-06-06
  • 基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享

    基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享

    基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享,需要的朋友可以參考一下
    2013-06-06
  • jquery和css3中的選擇器nth-child使用方法和用途示例

    jquery和css3中的選擇器nth-child使用方法和用途示例

    nth-child(),是CSS3中的一個偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標簽名、屬性名、內(nèi)容對DOM元素進行快速、準確的選擇。
    2023-03-03
  • js中的面向?qū)ο笕腴T

    js中的面向?qū)ο笕腴T

    本文主要介紹了js中的面向?qū)ο蟮南嚓P(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • 原生js+cookie實現(xiàn)購物車功能的方法分析

    原生js+cookie實現(xiàn)購物車功能的方法分析

    這篇文章主要介紹了原生js+cookie實現(xiàn)購物車功能的方法,結(jié)合實例形式分析了javascript結(jié)合cookie存儲實現(xiàn)購物車功能的相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • 原生js實現(xiàn)隨機點餐效果

    原生js實現(xiàn)隨機點餐效果

    一款十分簡單的原生js實現(xiàn)的隨機點菜代碼,點擊點菜按鈕隨機點取上面菜單的菜品,可根據(jù)需求改成自己需要功能,比如說隨機點名。感興趣的朋友來參考實現(xiàn)代碼吧
    2019-12-12
  • JavaScript實現(xiàn)非常簡單實用的下拉菜單效果

    JavaScript實現(xiàn)非常簡單實用的下拉菜單效果

    這篇文章主要介紹了JavaScript實現(xiàn)非常簡單實用的下拉菜單效果,通過定義顯示及隱藏菜單項及鼠標事件調(diào)用該函數(shù)實現(xiàn)下拉菜單功能,需要的朋友可以參考下
    2015-08-08
  • JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實現(xiàn)

    JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實現(xiàn)

    鏈表是一種常見的數(shù)據(jù)結(jié)構(gòu)。它是動態(tài)地進行存儲分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實現(xiàn),具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • js實現(xiàn)京東輪播圖效果

    js實現(xiàn)京東輪播圖效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)京東輪播圖效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06

最新評論