資訊專欄INFORMATION COLUMN
摘要：很多時候比如下拉加載更多這種組件都需要檢測滾動到底部事件。很明顯就可以得出滾動到底部的判斷判斷是否滾動到底部上面這個方法比較麻煩還要處理瀏覽器兼容性。
很多時候比如下拉加載更多這種組件都需要檢測滾動到底部事件。一般我們的做法是這個樣子，先獲取視窗高度window.innerHeight，然后獲取整個html文檔高度document.body.scrollHeight,再獲取滾動條卷上去的距離，document.body.scrollTop,如果滾動卷上去的距離大于等于整個文檔高度-視窗高度就說明滾動條到了底部。一圖勝千言！
就類似于我們通過一個窗戶觀察一幅畫一樣，窗戶就是瀏覽器視窗，那幅畫就是html文檔。很明顯就可以得出滾動到底部的判斷
//判斷是否滾動到底部
if(document.body.scrollTop>=document.body.scrollHeight - window.innerHeight){
//todosomething
}
上面這個方法比較麻煩還要處理瀏覽器兼容性。筆者無意中看到了一個getBoundClientRect()，這個方法比較新穎。下面和大家分享下：
用getBoundClientRect()判斷是否滾動到底部 getBoundClientRect()說明這個方法由一個dom元素調(diào)用返回一個Object ClientRect對象，
該對象有六個屬性
left，top,bottom,right,height,width.
left dom左邊界距離視窗左邊距離，
top dom上邊界距離視窗上部距離，
right dom右邊界距離視窗左邊距離，
bottom dom下邊界距離視窗上部的距離，
height dom的高度，
width dom的寬度
對于html文檔中最底部的dom元素，假設(shè)變量名稱是dom
if(document.body.scrollTop>=dom.getBoundClientRect().top+dom.getBoundClientRect().height){
//doSomething
}
這樣就可以實現(xiàn)滾動到底部的檢測，比上一種辦法簡潔多了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82988.html
摘要：一個更佳的方式是，當(dāng)滾動條距離底部一定距離時，就動態(tài)加載更多，向服務(wù)端請求資源。代碼總頁數(shù)當(dāng)前頁數(shù)滾動條距離底部的距離沒有更多了分頁列表的接口相關(guān)參考頁面在滾動條下拉時加載更多內(nèi)容個人項目經(jīng)驗下拉加載更多實現(xiàn)監(jiān)聽滾動事件不執(zhí)行 js實現(xiàn) web頁面的滾動條下拉時加載更多 在手機上，數(shù)據(jù)列表的分頁都是下拉到底部的時候會加載更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉加載更...
摘要：請求主體上行請求，有頭部主體。如何避免緩存問題方法隨機數(shù)隨機數(shù)，我們不要只要小數(shù)點后面的數(shù)字上面就拼接一個隨機字符串，保證每次不一樣方法時間戳從年月日到這一刻的毫秒數(shù)。 一、什么是AJAX，為什么要使用Ajax（請談一下你對Ajax的認(rèn)識） ajax全稱Asynchronous JavaScript and XML（異步的javascript和XML）,為什么會有這么一種技術(shù)的出現(xiàn)呢...
摘要：從本人這兩個月移動實踐的經(jīng)驗來看，微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般，有明顯的卡頓現(xiàn)象，在安卓下面還會出現(xiàn)滑動過快的時候在頁面停下來之后滾動條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁面的時候，有一個很管用的方法可以區(qū)分這個頁面是原生的還是H5形式的。隨便打開一個頁面，用力往下扯的時候，如果頁面上方出現(xiàn)了黑底，黑底上有一行諸如網(wǎng)頁由game.weixin.qq....
摘要：最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。 最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。 于是學(xué)習(xí)了下別人的插件（ps : 既然寫不出好插件，就要會學(xué)習(xí)別人的）： 官網(wǎng)github地址：https://github.com/mescroll/m... 1.整體預(yù)發(fā)結(jié)構(gòu) ;(function(name, definition) {...
閱讀 2814·2023-04-26 02:00
閱讀 2771·2019-08-30 15:54
閱讀 860·2019-08-30 11:15
閱讀 1502·2019-08-29 15:31
閱讀 917·2019-08-29 14:12
閱讀 489·2019-08-29 13:08
閱讀 838·2019-08-27 10:51
閱讀 2706·2019-08-26 12:17
