js監(jiān)聽html頁面的上下滾動事件方法
更新時間：2018年09月11日 15:03:39 作者：--LIANG--
今天小編就為大家分享一篇js監(jiān)聽html頁面的上下滾動事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在一個項目中，在寫前端頁面的時候，想像以前做Android時在頁面時刻監(jiān)聽上下滾動的事件，查找資料發(fā)現由鼠標或類似用戶動作觸發(fā)的事件有以下圖示：
不多說了，直接上代碼了，經過測試可以使用：
<!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頁面的上下滾動事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在行走江湖的過程中,會出現很多性能優(yōu)化的問題來讓你手足無措,那么這篇文章主要給大家介紹了關于JS防抖節(jié)流函數的實現與使用場景,針對這兩個問題來為你答疑解惑,需要的朋友可以參考下2021-07-07
深入學習js函數的隱式參數 arguments 和 this
這篇文章主要介紹了 深入學習js函數的隱式參數 arguments 和 this，arguments是一個類數組結構，它保存了調用時傳遞給函數的所有實參；this是函數執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。 下面分別對他們進行討論。,需要的朋友可以參考下2019-06-06
基于OO的動畫附加插件,可以實現彈跳、漸隱等動畫效果 分享，需要的朋友可以參考一下2013-06-06
jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child()，是CSS3中的一個偽類選擇符，JQuery選擇器繼承了CSS的部分語法，允許通過標簽名、屬性名、內容對DOM元素進行快速、準確的選擇。2023-03-03
本文主要介紹了js中的面向對象的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了原生js+cookie實現購物車功能的方法,結合實例形式分析了javascript結合cookie存儲實現購物車功能的相關操作技巧,需要的朋友可以參考下2017-12-12
一款十分簡單的原生js實現的隨機點菜代碼，點擊點菜按鈕隨機點取上面菜單的菜品，可根據需求改成自己需要功能，比如說隨機點名。感興趣的朋友來參考實現代碼吧2019-12-12
這篇文章主要介紹了JavaScript實現非常簡單實用的下拉菜單效果,通過定義顯示及隱藏菜單項及鼠標事件調用該函數實現下拉菜單功能,需要的朋友可以參考下2015-08-08
鏈表是一種常見的數據結構。它是動態(tài)地進行存儲分配的一種結構。本文主要介紹JavaScript數據結構中鏈表的實現，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細介紹了js實現京東輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06