如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background-color: #eee; } #contents{ margin:30px auto; width: 960px; height:300px; overflow:auto; } #list{ margin: 0; padding: 0; } #list li{ color:#666; list-style-type: none; background-color: #ddd; margin: 0; margin-top:10px; border-bottom: solid 1px #999; text-align: center; height:30px; } </style> <script type="text/javascript"> //获取列表中的原有内容 window.onload=function(){ var contents=document.getElementById("list").innerHTML; //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令 function appendcontent(){ document.getElementById("list").innerHTML+=contents; } document.getElementById("contents").onscroll=function(){ //content实际高度, var contentscrollHeight=document.getElementById("contents").scrollHeight; //contentclientHeight可视区高度, var contentclientHeight=document.getElementById("contents").offsetHeight; //滚动条距顶部高度 var contentscrollTop=document.getElementById("contents").scrollTop; //通过判断滚动条的距离底部位置判断手否加载内容 var height=contentclientHeight+100; if(contentscrollTop+height>=contentscrollHeight){ if(document.getElementById("list").childNodes.length>=150){ if(document.getElementById("nodata")){ }else{ var nodata=document.createElement("div"); nodata.id="nodata"; nodata.style.height="50px"; nodata.style.textAlign="center"; nodata.style.lineHeight="50px"; nodata.style.borderTop="1px solid #eee"; nodata.innerHTML="我是有底线的"; nodata.style.backgroundColor="#fff"; document.getElementById("list").appendChild(nodata); } console.log(document.getElementById("list").childNodes.length) return; }else{ appendcontent(); } } }; } </script> </head> <body> <div id="contents"> <ul id="list"> <li>张朋1</li> <li>张朋2</li> <li>张朋3</li> <li>张朋4</li> <li>张朋5</li> <li>张朋6</li> <li>张朋7</li> <li>张朋8</li> <li>张朋9</li> <li>张朋10</li> </ul> </div> </body> </html>
以上这篇JavaScript实现元素滚动条到达一定位置循环追加内容就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript实现元素滚动条到达一定位置循环追加内容”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 欢乐钓鱼大师ios兑换码在哪 欢乐钓鱼大师ios兑换码介绍
- 蒋小雨《夜空的风HQ》头版限量编号[低速原抓WAV+CUE]
- [ABC]邓丽君-初恋的地方[6N纯银镀膜][正版CD低速原抓WAV+CUE]
- 群星《发烧秘籍音响攻略DSD》[WAV+CUE]
- F4F《动物森友会》西施惠雕像 预售早鸟价89.99美元
- 任天堂新作通过ESRB评级 2D挑战和平台游戏合集
- 根本卖不出去!网友发现带预购奖励的《Forspoken》
- 群星《妖神令 影视原声专辑》[FLAC/分轨][170.42MB]
- 群星《越洋电话, Vol. 1》[320K/MP3][41.2MB]
- 群星《越洋电话, Vol. 1》[FLAC/分轨][114.98MB]
- 林志颖.1992-为什么受伤的总是我【飞碟】【WAV+CUE】
- 羽泉.2005-三十【华谊兄弟】【WAV+CUE】
- 白嘉莉.2021-精选集【海山】【WAV+CUE】
- 欢乐钓鱼大师玛瑙金鳞怎么钓 欢乐钓鱼大师玛瑙金鳞钓鱼攻略
- 欢乐钓鱼大师樱飘雪怎么钓 欢乐钓鱼大师樱飘雪钓鱼攻略