兩種js監(jiān)聽(tīng)滾輪事件的實(shí)現(xiàn)方法
更新時(shí)間：2016年05月13日 17:21:34 投稿：jingxian
下面小編就為大家?guī)?lái)一篇兩種js監(jiān)聽(tīng)滾輪事件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
前段時(shí)間在寫前端的時(shí)候，需要監(jiān)聽(tīng)瀏覽器的滾輪事件
網(wǎng)上查了一下，找到兩種監(jiān)聽(tīng)滾輪事件的方法：
一、原生js通過(guò)window.onscroll監(jiān)聽(tīng)
//window.onscroll = function() {//為了保證兼容性，這里取兩個(gè)值，哪個(gè)有值取哪一個(gè) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//scrollTop就是觸發(fā)滾輪事件時(shí)滾輪的高度
}
二、Jquery通過(guò)$(window).scroll()監(jiān)聽(tīng)
$(window).scroll(function(){//為了保證兼容性，這里取兩個(gè)值，哪個(gè)有值取哪一個(gè) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是觸發(fā)滾輪事件時(shí)滾輪的高度});
監(jiān)聽(tīng)到了滾輪事件，就可以實(shí)時(shí)地獲取到滾輪的高度，通過(guò)判斷滾輪高度等等一些流程控制，可以實(shí)現(xiàn)一些基于滾輪的特效，如：滾輪到底時(shí)異步加載數(shù)據(jù)、滾輪高度為0時(shí)頭部固定而到一定高度時(shí)頭部fixed浮動(dòng)等等一些特效
以上這篇兩種js監(jiān)聽(tīng)滾輪事件的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js點(diǎn)擊事件鏈接的問(wèn)題解決方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實(shí)例形式總結(jié)分析了5種數(shù)組求和的常見(jiàn)操作方法與相關(guān)處理技巧,需要的朋友可以參考下2019-01-01
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象轉(zhuǎn)換為鍵值對(duì)的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對(duì)象的數(shù)組轉(zhuǎn)換為鍵值對(duì)形式的四種方法,并從實(shí)現(xiàn)方式的簡(jiǎn)潔性、可讀性和性能角度進(jìn)行了分析比較,感興趣的朋友可以參考下2024-02-02
本文主要介紹了layer彈出層中H5播放器全屏出錯(cuò)解決&屬性poster底圖占滿video的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
不知不覺(jué)，就到了11月份了，其實(shí)我為啥要寫js游戲，覺(jué)得游戲更能引起共鳴。11月份開(kāi)篇之作：是男人就下100層，相信大家都玩過(guò)。2010-11-11
這篇文章主要是來(lái)和大家分享10個(gè)JavaScript中的編程小技巧，文中的示例代碼簡(jiǎn)潔易懂，對(duì)我們學(xué)習(xí)JavaScript開(kāi)發(fā)有一定的幫助，需要的可以參考一下2023-05-05
js實(shí)現(xiàn)在網(wǎng)頁(yè)上簡(jiǎn)單顯示時(shí)間的方法
這篇文章主要介紹了js實(shí)現(xiàn)在網(wǎng)頁(yè)上簡(jiǎn)單顯示時(shí)間的方法,實(shí)例分析了javascript實(shí)時(shí)顯示時(shí)間的技巧,需要的朋友可以參考下2015-03-03
微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過(guò)小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫(kù)獲取車源和求購(gòu)的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來(lái),需要的朋友可以參考下2022-10-10
moment.js 計(jì)算當(dāng)前一周、一月對(duì)應(yīng)日期的實(shí)例
這篇文章主要介紹了moment.js 計(jì)算當(dāng)前一周、一月對(duì)應(yīng)日期的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了通過(guò)HTML，CSS，JS三種判斷橫屏豎屏的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02