SOURCE

const IObserver = new IntersectionObserver((entries)=>{
    console.log(3,entries)
    entries.forEach((entry,i)=>{
        if(entry.isIntersecting){
            let span = document.createElement('span')
            span.innerHTML = 'intersectionObserver'
            entry.target.appendChild(span)
            entry.target.setAttribute('screen',true)
            IObserver.unobserve(entry.target)
        }
    })
},{
    root:null,
    threshold:.5 ,
    rootMargin : '1px'
})

const MObserver = new MutationObserver((mutationsList)=>{
    console.log(19,mutationsList)
    mutationsList.forEach(mutationItem=>{
        if(mutationItem.type ==='attributes') {
            console.log('添加attributes')
        }
        if(mutationItem.type ==='childList') {
            console.log('添加子节点')
        }
    })
})

let lis = document.getElementById('intersection').children 
// console.log(10,lis)
Array.from(lis).forEach(li=>{
    IObserver.observe(li)
    MObserver.observe(li,{
    childList: true, // 监听子节点变化
    attributes: true, // 监听节点属性
    subtree: true    // 监听节点dom树
  })
})

<ul id="intersection">
    <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></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

#intersection{
    height: 200px;
    overflow: auto;
}
#intersection li {
    line-height: 32px;
    height: 32px;
    border-bottom: 1px solid pink;
}