html5+css+js实现滚轮滚动翻页效果

html5+css+js实现滚轮滚动翻页效果。
纯原生代码，不使用jq。代码越简单越好。

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

鱼找水需要时间 Java领域优质创作者 2022-08-26 08:56

关注

<!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>