<del id="6s0yy"></del>

用getBoundClientRect檢測瀏覽器滾動到底部事件

awkj 發布于2019-08-20 16:32 / 3137人閱讀

摘要：很多時候比如下拉加載更多這種組件都需要檢測滾動到底部事件。很明顯就可以得出滾動到底部的判斷判斷是否滾動到底部上面這個方法比較麻煩還要處理瀏覽器兼容性。

很多時候比如下拉加載更多這種組件都需要檢測滾動到底部事件。一般我們的做法是這個樣子，先獲取視窗高度window.innerHeight，然后獲取整個html文檔高度document.body.scrollHeight,再獲取滾動條卷上去的距離，document.body.scrollTop,如果滾動卷上去的距離大于等于整個文檔高度-視窗高度就說明滾動條到了底部。一圖勝千言！

就類似于我們通過一個窗戶觀察一幅畫一樣，窗戶就是瀏覽器視窗，那幅畫就是html文檔。很明顯就可以得出滾動到底部的判斷

//判斷是否滾動到底部
if(document.body.scrollTop>=document.body.scrollHeight - window.innerHeight){

//todosomething

}

上面這個方法比較麻煩還要處理瀏覽器兼容性。筆者無意中看到了一個getBoundClientRect()，這個方法比較新穎。下面和大家分享下：

用getBoundClientRect()判斷是否滾動到底部 getBoundClientRect()說明

這個方法由一個dom元素調用返回一個Object ClientRect對象，
該對象有六個屬性
left，top,bottom,right,height,width.
left dom左邊界距離視窗左邊距離，
top dom上邊界距離視窗上部距離，
right dom右邊界距離視窗左邊距離，
bottom dom下邊界距離視窗上部的距離，
height dom的高度，
width dom的寬度

實現檢測滾動到底部

對于html文檔中最底部的dom元素，假設變量名稱是dom

if(document.body.scrollTop>=dom.getBoundClientRect().top+dom.getBoundClientRect().height){
//doSomething
}

這樣就可以實現滾動到底部的檢測，比上一種辦法簡潔多了。

GPU云服務器云服務器滾動到底部 jquery滾動到底部 js滾動條到底部 php滑動到底部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82988.html

js實現 web頁面的滾動條下拉時加載更多

摘要：一個更佳的方式是，當滾動條距離底部一定距離時，就動態加載更多，向服務端請求資源。代碼總頁數當前頁數滾動條距離底部的距離沒有更多了分頁列表的接口相關參考頁面在滾動條下拉時加載更多內容個人項目經驗下拉加載更多實現監聽滾動事件不執行 js實現 web頁面的滾動條下拉時加載更多在手機上，數據列表的分頁都是下拉到底部的時候會加載更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉加載更...

antyiwei 2019-08-23 11:35 評論0 收藏0
關于ajax學習筆記

摘要：請求主體上行請求，有頭部主體。如何避免緩存問題方法隨機數隨機數，我們不要只要小數點后面的數字上面就拼接一個隨機字符串，保證每次不一樣方法時間戳從年月日到這一刻的毫秒數。一、什么是AJAX，為什么要使用Ajax（請談一下你對Ajax的認識） ajax全稱Asynchronous JavaScript and XML（異步的javascript和XML）,為什么會有這么一種技術的出現呢...

YancyYe 2019-08-26 12:15 評論0 收藏0
微信里面防止下拉"露底"組件

摘要：從本人這兩個月移動實踐的經驗來看，微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般，有明顯的卡頓現象，在安卓下面還會出現滑動過快的時候在頁面停下來之后滾動條才閃到相應位置的現象。前言在微信里面瀏覽頁面的時候，有一個很管用的方法可以區分這個頁面是原生的還是H5形式的。隨便打開一個頁面，用力往下扯的時候，如果頁面上方出現了黑底，黑底上有一行諸如網頁由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 評論0 收藏0
下拉刷新，上拉加載插件mescroll源碼分析

摘要：最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。于是學習了下別人的插件（ps : 既然寫不出好插件，就要會學習別人的）：官網github地址：https://github.com/mescroll/m... 1.整體預發結構 ;(function(name, definition) {...

frontoldman 2019-08-26 12:09 評論0 收藏0