js实现无线滚动翻页
2021-03-24 本文已影响0人
YQSummer
js 滚动翻页，可自行加入条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.containerBox{
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.containerBox::-webkit-scrollbar{
width: 0;
height: 0;
}
.listItem{
height: 100px;
border-radius: 20px;
margin: 10px;
background-color: #0db4ff;
text-align: center;
color: #ffffff;
}
</style>
<body>
<div class="containerBox">
<div class="listItem">1</div>
<div class="listItem">2</div>
<div class="listItem">3</div>
<div class="listItem">4</div>
<div class="listItem">5</div>
<div class="listItem">6</div>
<div class="listItem">7</div>
<div class="listItem">8</div>
<div class="listItem">9</div>
<div class="listItem">10</div>
</div>
<script>
var box = document.querySelector('.containerBox')
var contentH = box.clientHeight //可视区域的高度
var scrollHight = box.scrollHeight //获取全文高度
var scrollTop = box.scrollTop //滚动条的高度
//监听滚动
box.onscroll = function(){
if(contentH - scrollTop- scrollHight -30 <=0.5){
box.insertAdjacentHTML('beforeEnd',`<div class="listItem">12</div>`)
}
}
</script>
</body>
</html>
