SOURCE

const con = document.querySelector('.scroll-con')
const imgs=document.querySelectorAll('.scroll-con-img')
/*con.addEventListerner('scroll',()=>{
    imgs.forEach(img=>{
        const imgTop=img.getBoundingClientReact().top
        const conTop=con.getBoundingClientReact().top
        if(imgTop-conTop<=con.clientHeight){ // 判断是否在视图里面
            const src= img.getAttribute('data-src')
            img.setAttribute('src', src)
            img.classList.add('fade')
        }
    })
})
*/

// 1.为每个元素设置intersection observer监听，以及懒加载后再断开监听
const options={
    root:con, // 使用浏览器视口作为root
    threshold:1, // root元素的外边距，类似margin
    rootMargin:'0px' , // 只要又一个target像素出现在root元素中，回调函数将会被执行
}
function lazyload(target){
    // entries图片进入窗口的事件，observer实例化得到的oberver元素
    let io = new IntersectionObserver((entries, observer)=>{
        // 2.触发回调后会遍历事件，找到触发回调的图片
        entries.forEach(entry=>{
            if(entry.isIntersecting){ // 如果图片进入窗口，值会时true
                const img = entry.target 
                // 3.将自定义属性的值赋值到src上
                const src= img.getAttribute('data-src')
                img.setAttribute('src', src)
                img.classList.add('fade')
                // 4.最后断开observer连接
                observer.disconnect()
            }
        })
    },options)
    io.observe(target)
}
// 5.给每个图片调用lazyload
imgs.forEach(lazyload)

<div class="scroll-con">
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈</p>
        <img class="scroll-con-img" data-src="https://img.alicdn.com/tfs/TB13quebcKfxu4jSZPfXXb3dXXa-990-430.jpg" />
        <img class="scroll-con-img" data-src="https://img.alicdn.com/imgextra/i2/725677994/O1CN01Fv0Z0T28vIjh3UpAj_!!725677994.jpg_430x430q90.jpg" />
        <img class="scroll-con-img" data-src="https://img.alicdn.com/imgextra/i3/725677994/O1CN01mhbKAI28vIjWIz9eM_!!725677994.jpg_430x430q90.jpg" />
    </div>

.scroll-con{
            height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .scroll-con-img{
            width: 60%;
            opacity: 0;
            transform: translateX(50%);
            transition: all 1s;
        }
        .fade{
            transform: translateX(0);
            opacity: 1;
            transition: all 1s;
        }