IntersectionObserver的简单使用-CSDN博客

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
            text-decoration: none;
        }
        ::-webkit-scrollbar{
            display: none;
        }
        #app{
            margin: 20px auto 0;
            width:800px;
            height: 400px;
            overflow: scroll;
            background:skyblue;
        }
        #app li{
            margin-bottom: 5px;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background:#16c3a2;
        }
    </style>
</head>
<body>
    <ul id="app">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
    </ul>
    <button id="close">关闭观察器</button>
    <script>
        const app = document.querySelector('#app')
        const close = document.querySelector('#close')
        const io = new IntersectionObserver((entries,observer)=>{
             entries.forEach(item=>{
                //出现在视口时
                if(item.isIntersecting){
                   item.target.style.background = 'orange'
                //离开视口区域
                }else{
                    item.target.style.background = '#16c3a2'
                } 
             })
        },
        {
            root:app,
            rootMargin: '0px 0px 50px 0px', // 页面底部50px开始加载
            threshold: 0.1 // 当目标元素10%可见时触发回调
        });
        //观察所有图片
        Array.from(app.children).forEach(item=>{
            io.observe(item)
        })
        close.onclick = function(){
            io.disconnect()
        }
    </script>
</body>
</html>