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)與使用場景
在行走江湖的過程中,會出現(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,arguments是一個類數(shù)組結(jié)構(gòu),它保存了調(diào)用時傳遞給函數(shù)的所有實參;this是函數(shù)執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進行討論。,需要的朋友可以參考下2019-06-06基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享
基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享,需要的朋友可以參考一下2013-06-06jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child(),是CSS3中的一個偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標簽名、屬性名、內(nèi)容對DOM元素進行快速、準確的選擇。2023-03-03JavaScript實現(xiàn)非常簡單實用的下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)非常簡單實用的下拉菜單效果,通過定義顯示及隱藏菜單項及鼠標事件調(diào)用該函數(shù)實現(xiàn)下拉菜單功能,需要的朋友可以參考下2015-08-08JavaScript數(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