元素内容在元素滚动条到达一定位置循环追加内容

Posted yumianlinghu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素内容在元素滚动条到达一定位置循环追加内容相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 body{
 8 background-color: #eee;
 9 }
10 #contents{
11 margin:30px auto;
12 width: 960px;
13 height:300px;
14 overflow:auto; 
15 }
16 #list{
17 margin: 0;
18 padding: 0;
19 }
20 #list li{
21 color:#666;
22 list-style-type: none;
23 background-color: #ddd;
24 margin: 0;
25 margin-top:10px;
26 border-bottom: solid 1px #999;
27 text-align: center;
28 height:30px;
29 }
30 </style>
31 <script type="text/javascript">
32 //获取列表中的原有内容
33 window.onload=function(){
34 
35 var contents=document.getElementById("list").innerHTML;
36 //每被调用一次，就将网页原有内容添加一份，这个大家可以写自己要加载的内容或指令
37 function appendcontent(){
38 document.getElementById("list").innerHTML+=contents;
39 }
40 document.getElementById("contents").onscroll=function(){
41 //content实际高度，
42 var contentscrollHeight=document.getElementById("contents").scrollHeight;
43 //contentclientHeight可视区高度，
44 var contentclientHeight=document.getElementById("contents").offsetHeight;
45 //滚动条距顶部高度
46 var contentscrollTop=document.getElementById("contents").scrollTop;
47 //通过判断滚动条的距离底部位置判断手否加载内容
48 var height=contentclientHeight+100;
49 if(contentscrollTop+height>=contentscrollHeight){
50 if(document.getElementById("list").childNodes.length>=150){
51 if(document.getElementById("nodata")){
52 
53 }else{
54 var nodata=document.createElement("div");
55 nodata.id="nodata";
56 nodata.style.height="50px";
57 nodata.style.textAlign="center";
58 nodata.style.lineHeight="50px";
59 nodata.style.borderTop="1px solid #eee";
60 nodata.innerHTML="我是有底线的";
61 nodata.style.backgroundColor="#fff";
62 document.getElementById("list").appendChild(nodata);
63 }
64 console.log(document.getElementById("list").childNodes.length)
65 return;
66 }else{
67 appendcontent(); 
68 }
69 
70 }
71 };
72 
73 }
74 </script>
75 </head>
76 <body>
77 <div id="contents">
78 <ul id="list">
79 <li>张朋1</li>
80 <li>张朋2</li>
81 <li>张朋3</li>
82 <li>张朋4</li>
83 <li>张朋5</li>
84 <li>张朋6</li>
85 <li>张朋7</li>
86 <li>张朋8</li>
87 <li>张朋9</li>
88 <li>张朋10</li>
89 </ul>
90 </div>
91 </body>
92 </html>

 

以上是关于元素内容在元素滚动条到达一定位置循环追加内容的主要内容，如果未能解决你的问题，请参考以下文章

js如何在页面滚动到一定位置时触发事件？

Javascript禁止父元素滚动条滚动， pc移动端均有效

jquery 元素控制(追加元素/追加内容)

元素width:100%; 设置padding出现横向滚动条的问题

网页设计如何设置网页部分内容不随着滚动条而移动移动？

怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动？