成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

用getBoundClientRect檢測(cè)瀏覽器滾動(dòng)到底部事件

awkj / 3153人閱讀

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

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


就類(lèi)似于我們通過(guò)一個(gè)窗戶觀察一幅畫(huà)一樣，窗戶就是瀏覽器視窗，那幅畫(huà)就是html文檔。很明顯就可以得出滾動(dòng)到底部的判斷

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

//todosomething

}

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

用getBoundClientRect()判斷是否滾動(dòng)到底部 getBoundClientRect()說(shuō)明

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

實(shí)現(xiàn)檢測(cè)滾動(dòng)到底部

對(duì)于html文檔中最底部的dom元素，假設(shè)變量名稱是dom

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

這樣就可以實(shí)現(xiàn)滾動(dòng)到底部的檢測(cè)，比上一種辦法簡(jiǎn)潔多了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82988.html

相關(guān)文章

  • js實(shí)現(xiàn) web頁(yè)面的滾動(dòng)條下拉時(shí)加載更多

    摘要：一個(gè)更佳的方式是，當(dāng)滾動(dòng)條距離底部一定距離時(shí)，就動(dòng)態(tài)加載更多，向服務(wù)端請(qǐng)求資源。代碼總頁(yè)數(shù)當(dāng)前頁(yè)數(shù)滾動(dòng)條距離底部的距離沒(méi)有更多了分頁(yè)列表的接口相關(guān)參考頁(yè)面在滾動(dòng)條下拉時(shí)加載更多內(nèi)容個(gè)人項(xiàng)目經(jīng)驗(yàn)下拉加載更多實(shí)現(xiàn)監(jiān)聽(tīng)滾動(dòng)事件不執(zhí)行 js實(shí)現(xiàn) web頁(yè)面的滾動(dòng)條下拉時(shí)加載更多 在手機(jī)上，數(shù)據(jù)列表的分頁(yè)都是下拉到底部的時(shí)候會(huì)加載更多，但是，去年三月份的時(shí)候遇到了客戶要求web頁(yè)面也要下拉加載更...

    antyiwei 評(píng)論0 收藏0

  • 關(guān)于ajax學(xué)習(xí)筆記

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

    YancyYe 評(píng)論0 收藏0

  • 微信里面防止下拉"露底"組件

    摘要：從本人這兩個(gè)月移動(dòng)實(shí)踐的經(jīng)驗(yàn)來(lái)看，微信的里面和的滑動(dòng)效果無(wú)論是在安卓還是下的體驗(yàn)都很一般，有明顯的卡頓現(xiàn)象，在安卓下面還會(huì)出現(xiàn)滑動(dòng)過(guò)快的時(shí)候在頁(yè)面停下來(lái)之后滾動(dòng)條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁(yè)面的時(shí)候，有一個(gè)很管用的方法可以區(qū)分這個(gè)頁(yè)面是原生的還是H5形式的。隨便打開(kāi)一個(gè)頁(yè)面，用力往下扯的時(shí)候，如果頁(yè)面上方出現(xiàn)了黑底，黑底上有一行諸如網(wǎng)頁(yè)由game.weixin.qq....

    hot_pot_Leo 評(píng)論0 收藏0

  • 下拉刷新，上拉加載插件mescroll源碼分析

    摘要：最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫(xiě)了一個(gè)，單總是有點(diǎn)卡頓。 最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫(xiě)了一個(gè)，單總是有點(diǎn)卡頓。 于是學(xué)習(xí)了下別人的插件（ps : 既然寫(xiě)不出好插件，就要會(huì)學(xué)習(xí)別人的）： 官網(wǎng)github地址：https://github.com/mescroll/m... 1.整體預(yù)發(fā)結(jié)構(gòu) ;(function(name, definition) {...

    frontoldman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

awkj

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<