浏览器和元素的滚动事件(scroll)相关

好久没有手写过列表的懒加载了，刚好遇到权当是复习了吧，记录一下相关的API

html代码如下

<div class="box">
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
        滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答
    </div>
    <button id="btn">点我赋值scrollTop</button>

然后样式设置一下让它出现滚动条

.box{
       width: 100px;
       height: 100px;
       padding: 10px;
       border: 3px solid blue;
       overflow: auto;
}

通过js的事件来监听 box 元素的滚动距离等来做相关的操作，有几点注意的：

1. addEventListener添加的事件在通过removeEventListener来进行移出的时候，参数中的事件名和函数都必须是同一个，在示例中是通过新建了一个 callback 的函数实现
2. scroll家族的一些属性要熟悉：
3. scrollTop：获取的是滚动时被卷去的距离

4. clientHeight：获取的是 元素/视口 的高度(content + padding)，比如：

              height:100px;padding:10px;   这时的clientHeight就等于 120

5. scrollHeight：获取到元素的实际高度(content + padding)，如果元素没有设置指定的高度 自适应的话和clientHeight相等，即使被overflow:hidden/auto隐藏掉的部分也会被获取到
6. 想要获取到距离底部的距离可以使用-->元素的实际高度 - 滚动时被卷去的距离 - 元素/视口 的高度， 获取到距离底部的距离 scrollHeight - scrollTop - clientHeight

let box = document.querySelector('.box')
    
    window.addEventListener('scroll',function(){
        console.log('屏幕滚动');
    })

    function callback(){

        let cover = box.scrollTop + box.clientHeight

        let remain = box.scrollHeight - cover

        console.log(`box滚动的距离${box.scrollTop},
                    box视口的高度${box.clientHeight},
                    总共展示过的部分${cover},
                    距离底部的距离${remain}`);

        if(remain <= 200){
            console.log('快到底了');
            box.removeEventListener('scroll',callback)
        }
    }

    box.addEventListener('scroll', callback)

    console.log(`box的高度${box.scrollHeight}`);
    
    //document.documentElement 获取到的是整个html文档的信息,root节点

    //给box.scrollTop赋值移动到指定的地点
    let btn = document.querySelector('#btn')
    btn.onclick = function(){
        console.log('点击');
        box.scrollTop = 600
    }