JS实现滚动条触底加载更多

原理

1.通过监听滚动区域数字正射影像图的卷起事件，计算出触底

//滚动可视区域高度当前滚动位置===整个滚动高度滚动DOM。客户端高度滚动DOM。滚动顶部===滚动DOM。滚动高度

2.触底后触发列表添加，列表添加使用createDocumentFragment，将多次插入的数字正射影像图先存入内存，最后一次填充进去，提高性能，也方便后面的突变观察器监听

3.使用突变观察器监听列表的数字正射影像图添加，添加完毕后，隐藏加载中提示

示例

https://codepen.io/klren0312/full/dybgayL

参考资料

https://开发者。Mozilla。org/zh-CN/docs/Web/API/Element/客户端高度https://开发者。Mozilla。org/zh-CN/docs/Web/API/Element/scrollh 8 https://开发者。Mozilla。org/zh-CN/docs/Web/API/GlobalEventHandlers/on scol https://developer。Mozilla。组织/zh-CN

代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title style .隐藏{ display:无}。滚动{高： 200像素宽度： 300像素；溢出-y:自动；border: 1px固体# ddd}。正在加载{ text-align :居中；} ul { margin : 0；padd : 0；} Li { padd : 10pxmargin : 10px文本对齐：中心；背景： # FFF6F6列表样式类型：无；}/style/head body div id=' js-scroll ' class=' scroll ' ul id=' js-list ' Li 000000/Li Li 000000/Li Li 000000/000000/Li/ul div class=' loading hide ' id=' js-loading '加载中./div /div脚本让索引=0 //列表个数const list DOM=文档。getelementbyid(' js-list ')常量加载DOM=document。getelementbyid(' js-loading ')/* * *使用突变观察器监听列表的数字正射影像图改变*/const config={ attributes : true，childList: true，subtree: true } const回调=函数(突变列表，观察者){ for(让突变列表突变){ if(variation。type==' child list '){ if(index===5){正在加载DOM。innertext='加载完毕} else {正在加载DOM。班级名单。add(' hide ')} } } } const observer=new MutationObserver(回调)观察者。observer(listDom，config) /** * clientHeight滚动可视区域高度*滚动顶部当前滚动位置*滚动高度整个滚动高度*/const滚动DOM=文档。getelementbyid(' js-scroll ')滚动DOM。onscroll=()={ if(滚动DOM。客户端高度解析器(滚动DOM。滚动顶部)==滚动DOM。滚动高度){ if(正在加载DOM。班级名单。包含('隐藏')索引=5){加载DOM。班级名单。移除('隐藏')add list()} if(index=5){ observer。disconnect()//加载完毕停止监听列表数字正射影像图变化} } } /** * 添加列表*/函数AddList(){ const fragment=document。createdocumentfragment())setTimeout(()={ index for(让I=0；i5；I){ const Li=文档。创建元素(“李”)李。内部文本=新数组(6).填充（索引)。join(')片段。appendchild(李)} listdom。appendchild(fragment)}，1000) } /script/body/html总结

以上所述是小编给大家介绍的射流研究…实现滚动条触底加载更多，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！