关于javascript:浏览器和元素的滚动事件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
    }