监听视口

DEMO

预览：http://js.jirengu.com/lolugoroku/1/watch?html,css,js,output

<div>
    <ul class="ul-list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li id="content" class="text left">被监听的content</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

li{
    list-style: none;
    outline:1px solid black;

}
.ul-list li{
    width: 300px;height: 20vh;
    background: #dc80ae;
    transition:all 1s

}

/*  .ul-list li:nth-of-type(odd){
    background: #a7a0a3;
} */
.ul-list li:nth-of-type(even){} /*偶数行*/

.left{

    animation-direction:alternate;
    -webkit-animation-direction:alternate;
}
@keyframes mymove
{
    from {margin-left:0px;}
    to {margin-left:50px;}
}

function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
  changes.forEach(item=>{
      if (item.intersectionRatio > 0) {
            console.log('进入可视区域',item.target);
            item.target.style.background='red';
      } else {
            console.log('移出可视区域');
            item.target.style.background='#a7a0a3';
      }
  })

  }
);

//获取所有的div
var uls=document.getElementsByClassName("ul-list")[0]
var lis=uls.getElementsByTagName("li");
console.log(lis)
for(var i=0;i<lis.length;i++){
    observer.observe(lis[i]);
}

IntersectionObserver API 使用教程

链接

IntersectionObserver API 使用教程 IntersectionObserver-监听元素是否进入了设备的可视区域之内 使用IntersectionObserver来在提升一下性能