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

JavaScript022

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不能传数组的，所以你先要把数组转化成字符串，什么格式你自己看着办，都支持

用ajax 就可以了，点击加载更多时候，触发事件，发送ajax请求到php ，php 将数据发送回ajax 回调函数里面，然后用js 追加到你页面的后面就可以了

$.ajax({

type: "post",采用post 参数

url: "/index.php?m=member&c=index&a=public_up", //请求的php 函数

data: {id:$rid,table:$table}, //传递的参数

dataType: 'json', //返回值以json格式返回

success: function(data) { //回调函数，在这里将data里面的数据追加到页面就可以了

}

})