兩種js監(jiān)聽滾輪事件的實(shí)現(xiàn)方法
更新時(shí)間：2016年05月13日 17:21:34 投稿：jingxian
下面小編就為大家?guī)?lái)一篇兩種js監(jiān)聽滾輪事件的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
前段時(shí)間在寫前端的時(shí)候，需要監(jiān)聽瀏覽器的滾輪事件
網(wǎng)上查了一下，找到兩種監(jiān)聽滾輪事件的方法：
一、原生js通過window.onscroll監(jiān)聽
//window.onscroll = function() {//為了保證兼容性，這里取兩個(gè)值，哪個(gè)有值取哪一個(gè) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//scrollTop就是觸發(fā)滾輪事件時(shí)滾輪的高度
}
二、Jquery通過$(window).scroll()監(jiān)聽
$(window).scroll(function(){//為了保證兼容性，這里取兩個(gè)值，哪個(gè)有值取哪一個(gè) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是觸發(fā)滾輪事件時(shí)滾輪的高度});
監(jiān)聽到了滾輪事件，就可以實(shí)時(shí)地獲取到滾輪的高度，通過判斷滾輪高度等等一些流程控制，可以實(shí)現(xiàn)一些基于滾輪的特效，如：滾輪到底時(shí)異步加載數(shù)據(jù)、滾輪高度為0時(shí)頭部固定而到一定高度時(shí)頭部fixed浮動(dòng)等等一些特效
以上這篇兩種js監(jiān)聽滾輪事件的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了彌補(bǔ)localStorage容量缺陷的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來(lái)了麻煩，下面是腳本之家編輯簡(jiǎn)單的整理下。2009-08-08
基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲邏輯流程圖文詳解(附完整代碼)
打地鼠小游戲大家都喜歡玩，本文是以html編寫的，并且使用HBulider軟件進(jìn)行編寫的，下面通過本文給大家分享基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲邏輯流程圖文詳解，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了JS驗(yàn)證字符串功能實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
bootstrap模態(tài)框遠(yuǎn)程示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框遠(yuǎn)程示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
javascript實(shí)現(xiàn)圖片延遲加載方法匯總(三種方法)
看到一些大型網(wǎng)站，頁(yè)面如果有很多圖片的時(shí)候，當(dāng)你滾動(dòng)到相應(yīng)的行時(shí)，當(dāng)前行的圖片才即時(shí)加載的，這樣子的話頁(yè)面在打開只加可視區(qū)域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁(yè)面加載的速度，跟著小編一起學(xué)習(xí)javascript實(shí)現(xiàn)圖片延遲加載吧2015-08-08
這篇文章主要介紹了ES6 Promise對(duì)象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實(shí)例形式分析了Map的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03