Home > Article > Web Front-end > How to implement element scroll bar loop to append content in JavaScript

How to implement element scroll bar loop to append content in JavaScript

亚连Original: 2018-06-14 17:40:501885browse

Below I will share with you a JavaScript implementation of the element scroll bar reaching a certain position to add content in a loop. It has a good reference value and I hope it will be helpful to everyone.

is as follows Note:

<!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("p");
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>
<p 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>
</p>
</body>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How vux implements the pull-up refresh function

How to implement calls between methods in vue

How to use the Upload component of element-ui in vue

The above is the detailed content of How to implement element scroll bar loop to append content in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve the return to top effect in JSNext article：How to achieve the return to top effect in JS

See more

How to implement element scroll bar loop to append content in JavaScript

Related articles