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)與使用場景
在行走江湖的過程中,會出現(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-06
jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child()，是CSS3中的一個偽類選擇符，JQuery選擇器繼承了CSS的部分語法，允許通過標簽名、屬性名、內(nèi)容對DOM元素進行快速、準確的選擇。2023-03-03
本文主要介紹了js中的面向?qū)ο蟮南嚓P(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了原生js+cookie實現(xiàn)購物車功能的方法,結(jié)合實例形式分析了javascript結(jié)合cookie存儲實現(xiàn)購物車功能的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
一款十分簡單的原生js實現(xiàn)的隨機點菜代碼，點擊點菜按鈕隨機點取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機點名。感興趣的朋友來參考實現(xiàn)代碼吧2019-12-12
JavaScript實現(xiàn)非常簡單實用的下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)非常簡單實用的下拉菜單效果,通過定義顯示及隱藏菜單項及鼠標事件調(diào)用該函數(shù)實現(xiàn)下拉菜單功能,需要的朋友可以參考下2015-08-08
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)京東輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06