先看问题：

发展的时候，看到这个现象就会想：为什么左边的数据出来的速度比右边的慢？因为这里没有分页，左侧有很多数据，所以查询比较慢。

解决方法是分页，但是项目中使用的插件无法控制样式，如果改变分页的宽度，样式会混乱。最简单的方法是不分页(_)

但既然是你的工作，为什么不做好呢？然后写分页，滚动分页！

我问过其他同事，其他同事也问过。你去百度。

是的，网上有很多，但是都乱七八糟，没有效果图。孔

经过一番思考，百度的想法来了：

有三个dom元素需要理解，即：clientHeight、offsetHeight和scrollTop。

ClientHeight:这个元素的高度，它占据了整个空间。因此，如果div有滚动条，高度不包括滚动条不显示的下部内容。而只是DIV的高度。

OffsetHeight:指元素内容的高度。根据上图，这个高度就是DIV里面的高度，包括滚动条下面的可见部分和不可见部分。

这是什么？可以理解为滚动条可以滚动的长度。

例如，如果一个DIV的高度是400px(即clientHeight是400)，而里面的内容是一个长列表，那么内容高度就是1000px(即offsetHeight是1000)。然后，我们可以在可见部分看到400px，在1000px内容中看到600px是不可见的。而这个看不见的部分，正是通过拉动滚动条，我们才能显示这个部分。如果不拉动滚动条，滚动顶部为0。如果将滚动条拉到底部，将显示列表的底部，滚动顶部为600。因此，scrollTop的取值范围为[0，600]。因此，这个600可以理解为滚动条可以滚动的长度。

理解了上面的概念之后。判断是否滚动到底部很容易。

首先我们把滚动条从上往下拉，变化的是scrollTop的值，有一个区间。

此时间间隔为：[0，(offset theight-client height)]

这里说的已经很清楚了，接下来我再补充几点：

这个scrollTop是距离滚动窗口顶部的距离，应该计算到滚动条底部的距离，否则会多次触发滚动事件，出现向上滚动触发。

相关实现代码：

//滚动到第$('页。表格-可滚动')。scroll(function(){//获取滚动高度var scrollhight=$(')。佩奇-风险-总结。表格-可滚动')。scroll top()；//获取滚动窗口的高度var windowscrollhight=$(')。page-risk-sumary . table-scroll ')。高度()；//获取文档高度var DOM hight=$('。佩奇-风险-总结。表格-可滚动')。获取(0)。scrollheightif(scroll high-17=DOM high-windowscroll high){ page Number=(Number(page Number)1)' '；if(page number=show content . total page){ show content . getcontract list({ ' page number ' : page number，' pageSize': '10 '，' focus ' : ' 0 ' })；} } });这个17是由DOM high-windowscrolhigh得到的，它是滚动条到底部的距离。

很简单，就实现了滚动分页！

看效果图：

以上是边肖介绍的JS鼠标滚动分页效果的例子，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！