SOURCE

let container = document.querySelector(".container"); // 可视区域
let items = document.querySelectorAll(".item"); // 被观察元素

console.log(items[0].dataset.trace,'dataset',items[0].getAttribute('data-trace'))
let options = {
  root: container
}
let IO = new IntersectionObserver(IOCallback, options);

// 循环所有 img 标签，使它被观察
items.forEach((item) => {
  IO.observe(item)
})

// 回调函数
function IOCallback(entries, observer) {
  // 循环所有观察元素
  entries.forEach(item => {
    // 如果出现在可视区内，则替换 src
    if (item.isIntersecting) {
        console.log(item,item.target.dataset.trace,'item')
    //   console.log(item,"出现在可视区内")
    //   item.target.src = item.target.dataset.src // 替换 src
      IO.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用 callback 函数
    }
  });
}

<div class="container">
    <div class="item" data-trace="item1">item1</div>
    <div class="item" data-trace="item2">item2</div>
    <div class="item" data-trace="item3">item3</div>
    <div class="item" data-trace="item4">item4</div>
    <div class="item" data-trace="item5">item5</div>

</div>

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.container{
    background:red;
    height:500px;
    width:100vw;
    overflow:auto;
}

.item{
    height:500px;
    width:100%;
    background-color:blue;
    margin-top:10px;
}