jsp页面中数据随屏幕滚动加载如何实现

JavaScript023

jsp页面中数据随屏幕滚动加载如何实现,第1张

你这个要求，跟jsp基本无关了，就是前台展现的方式，ajax获取json格式的数据后，将数据放在一个数组中，每次取10条（多少自己定），取完之后在页面显示，同时从数组中删除，这样就不会重复加载了。

前台写一个js方法，判断当前页面高度、屏幕高度、鼠标滚轮位置，根据这三个值来判断是否需要加载下一页数据。

以下代码使用jQuery

var pageH = $(document.body).height()

var scrollT = $(window).scrollTop()

var winH = $(window).height()

var rat = (pageH - winH - scrollT)/winH

当rat小于一个值时（自己定，可以设置成0.01或者0.02），则加载下一页数据。或者显示一个“加载下一页”的按钮，点击后加载下一页的数据，当判断所有数据都加载完毕后，重新到后台获取新的数据。

原理

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