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

JavaScript010

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

思路：当滚动条到达底部时，调用js方法去加载数据

代码如下：

<div style="height:1600pxborder:1px solid red">设高度模拟滚动</div>

//引入js

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script type="text/javascript">

$(function () {

   $(window).scroll(function () {

      //浏览器所能看到的页面的那部分的高度

      var winH = $(window).height()

      var scrH = $(window).scrollTop()//滚动的高度

      //获取整个页面的高度 htmH为设置的滚动到的高度位置

      var htmH = $(document).height() - 100

           //可见高度+滚动高度 超出 设置的高度，触发方法

      if (winH + scrH >= htmH) {

//到达底部-100的高度，触发方法

alert(1)

      }

   })

})

</script>