～遗憾 2022-08-26 07:52 采纳率: 80%
浏览 69
已结题

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

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

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月11日
  • 已采纳回答 9月3日
  • 创建了问题 8月26日