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