国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

解決HTML5中滾動到底部的事件問題

2024-08-26 00:21:41
字體:
來源:轉載
供稿:網友

問題:在H5中,我們有這樣的需求:例如有列表的時候,滾動到底部時,需要加載更多。

解決方案:可以采用window的滾動事件進行處理

分析:如果滾動是針對整個屏幕而言的(不針對于某個界面小塊),那么這個應該是是成立的:屏幕的高度+最大滾動的距離 = 內容的高度

代碼實現:

 

<html>     <head>     <meta charset="UTF-8">        <title>監聽滾動到底部滾動底部</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 計算屬性的高度    var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', ''));    console.log(height,"div0的計算高度")    window.onscroll = function(){/*scrollTop 為滾動條頂端距離界面右上角的距離,這里采用了兼容性寫法*/let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;     //+-5是為了保證一定的彈性,并非要剛好相等才出發,    if(height-5<=scrollTop+clientHeight&&scrollTop+clientHeight<=height+5){      console.log('監聽成功','到達底部')    }    }    }    </script></html>

代碼的相關說明:很多時候,列表加載,我們不能夠把裝載子元素的父容器高度設死,此時采用style設置為auto時,element.style.height也會等于auto ,建議采用clientHeight或者利用計算樣式 getComputedStyle計算高度

總結

以上所述是小編給大家介紹的解決HTML5中滾動到底部的事件問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!


注:相關教程知識閱讀請移步到HTML教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 镇江市| 西青区| 万州区| 日喀则市| 防城港市| 农安县| 读书| 息烽县| 庆元县| 井研县| 高阳县| 衡山县| 镇雄县| 马龙县| 台山市| 米易县| 万源市| 蒲江县| 安达市| 财经| 许昌市| 宣城市| 马边| 铜陵市| 剑河县| 改则县| 青阳县| 三河市| 麻城市| 革吉县| 久治县| 尤溪县| 集安市| 磐石市| 观塘区| 平南县| 卢龙县| 闽清县| 方正县| 隆安县| 汶上县|