浏览器和元素滚动事件（scroll）相关

时间：2023-04-02 17:52:51 HTML

好久没做过手写列表的懒加载了。碰巧遇到了Quan作为复习。记录相关APIhtml代码如下-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-滴答-tick-tick-tick-tick-tick-tick-tick-tick-tick-tick-tick-tickTickanswer

点我指定scrollTop和然后设置样式让它出现scrollbar.box{width:100px;高度：100px；填充：10px；边框：3px纯蓝色；overflow:auto;}使用js事件监听box元素的滚动距离等做相关操作。有几点需要注意：通过removeEventListener移除addEventListener添加的事件时，参数中的事件名称和函数必须相同。示例中，scrollfamily的一些属性是通过创建一个新的回调函数来实现的：scrollTop：获取滚动时滚动的距离clientHeight：获取元素/视口的高度（content+padding），例如：height:100px;填充:10px;此时clientHeight等于120scrollHeight：获取元素的实际高度（content+padding），如果元素没有设置指定高度适配，则等于clientHeight，即使overflow:hidden/auto的隐藏部分也将获得。如果想获取距底部的距离，可以使用-->元素的实际高度-滚动时滚开的距离-元素/视口的高度，获取距底部的距离scrollHeight-scrollTop-clientHeightletbox=document.querySelector('.box')window.addEventListener('scroll',function(){console.log('screenscrolling');})functioncallback(){letcover=box.scrollTop+box.clientHeightletremain=box.scrollHeight-coverconsole.log(`框滚动距离${box.scrollTop}，框视口高度${box.clientHeight}，总显示部分${cover}，距底部距离${保持}`);if(remain<=200){console.log('快到底部了');box.removeEventListener('scroll',callback)}}box.addEventListener('scroll',callback)console.log(`盒子的高度${box.scrollHeight}`);//document.documentElement获取整个html文档的信息，根节点//给box.scrollTop赋值并移动到指定位置letbtn=document.querySelector('#btn')btn.onclick=function(){console.log('点击');盒子.scrollTop=600}

上一篇：前端面试日常3+1——Day564

下一篇：CSS实现搜索相关的交互

浏览器和元素滚动事件（scroll）相关相关文章