无限滚动列表-CSDN博客

本文链接：https://blog.csdn.net/qq_55139096/article/details/140401913

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限滚动</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        ::-webkit-scrollbar{
            display: none;
        }
        div{
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 20px auto;
            width: 600px;
            height: 400px;
            overflow-y: scroll;
            text-align: center;
            box-shadow: 0 0 3px #ccc;
        }
        ul{
            width:100%;
            height:auto;
        }
        li{
            margin: 10px 0;
            width:100%;
            height: 30px;
            line-height: 30px;
            background:#f7f7f7;
        }
    </style>
</head>
<body>
    <div>
       <ul id="box1">

       </ul>  
       <ul id="box2">
  
       </ul>
    </div>
    <script>
       const div = document.querySelector('div')
       const box1 = document.querySelector('#box1')
       const box2 = document.querySelector('#box2')
       const list = Array.from({ length:15 },(_, index)=>index)
       const createList = ()=>{
           list.forEach(item=>{
            const li = document.createElement('li')
            li.textContent = item + 1
              box1.appendChild(li)
           })
       }
       createList()
       box2.innerHTML = box1.innerHTML
       let i = 0
       setInterval(()=>{
           //margin为5
           if(div.scrollTop >= box1.offsetHeight + 5){
                div.scrollTop = 0
           }else{
              div.scrollTop ++
           }
       },20) 
    </script> 
</body>
</html>