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

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

滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答

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

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

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

addEventListener添加的事件在通过removeEventListener来进行移出的时候，参数中的事件名和函数都必须是同一个，在示例中是通过新建了一个 callback 的函数实现
scroll家族的一些属性要熟悉：
scrollTop：获取的是滚动时被卷去的距离
【浏览器和元素的滚动事件(scroll)相关】clientHeight：获取的是元素/视口的高度(content + padding)，比如：

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

let box = document.querySelector('.box')window.addEventListener('scroll',function(){ console.log('屏幕滚动'); })function callback(){let cover = box.scrollTop + box.clientHeightlet remain = box.scrollHeight - coverconsole.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 }