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

JavaScript056

JS实现滚动条触底加载更多,第1张

原理

1.通过监听滚动区域DOM的scroll事件, 计算出触底

// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度

scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听

3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示

示例

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

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

不想给你写，我就给你说原理吧，用第一个按钮给个onclick=fun1() 第二个给onclick=fun2()

然后写着两个函数，fun1中的ajax调用的sql语句加limit 10，fun2 中ajax不加limit不就完了

对了ajax不能传数组的，所以你先要把数组转化成字符串，什么格式你自己看着办，都支持