js实现无线滚动翻页

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容