您好,登錄后才能下訂單哦!
HTML5中滾動(dòng)到底部的事件如何解決?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
代碼實(shí)現(xiàn):
<html> <head> <meta charset="UTF-8"> <title>監(jiān)聽滾動(dòng)到底部滾動(dòng)底部</title> <style> .div2{ width:100px; height:100px; border:1px solid red } *{ margin:0 } .button1:active{ background:red } body{ height:375px; width:667px; border:1px solid red } .div1{ height:600px; width:100%; background:red } .div2{ height:600px; width:100%; background:green } .div3{ height:600px; width:100%; background:blue } .div4{ height:600px; width:100%; background:yellow } </style> </head> <body > <div class="div0"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </div> </body> <script> window.onload = function(){ //獲取容器父元素 var div0 = document.getElementsByClassName('div0')[0]; //height 計(jì)算屬性的高度 var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height,"div0的計(jì)算高度") window.onscroll = function(){ /* scrollTop 為滾動(dòng)條頂端距離界面右上角的距離,這里采用了兼容性寫法 */ let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5是為了保證一定的彈性,并非要?jiǎng)偤孟嗟炔懦霭l(fā), if(height-5<=scrollTop+clientHeight&&scrollTop+clientHeight<=height+5){ console.log('監(jiān)聽成功','到達(dá)底部') } } } </script> </html>
代碼的相關(guān)說(shuō)明:很多時(shí)候,列表加載,我們不能夠把裝載子元素的父容器高度設(shè)死,此時(shí)采用style設(shè)置為auto時(shí),element.style.height
也會(huì)等于auto ,建議采用clientHeight
或者利用計(jì)算樣式 getComputedStyle
計(jì)算高度
關(guān)于HTML5中滾動(dòng)到底部的事件如何解決問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。