开发者社区> jslin_> 正文

JS鼠标滚动分页

简介: 首先先看问题: Paste_Image.png 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。
+关注继续查看

首先先看问题:

img_58570d2f47eaad110f47236540e2cd92.png
Paste_Image.png

在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。
解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉。最简单的办法就是不分页(_
但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页!
问了其他同事,其他同事也。。。你去百度去。。。。

img_d044407cc20a124a4bbdb66ce07ccbc1.png
Paste_Image.png

是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图。。。坑
经过一番思考,和百度 思路来了:
需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。
clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。
scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。
举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。
理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。
首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是: [0, (offsetHeight - clientHeight)]
这里说的已经很明白了,然后我再补充几点:
这个scrollTop 是离滚动窗口的顶部的距离,还有就是要计算这个滚动条离底部的距离 ,要不然滚动事件会多次触发,还会出现往上滚动触发。
相关实现代码:
<code>
//滚动进行分页
$(".table-scrollable").scroll(function(){
//获得滚动的高度
var scrollhight = $(".page-risk-sumary .table-scrollable").scrollTop();
//获得滚动窗口的高度
var windowScrollhight = $(".page-risk-sumary .table-scrollable").height();
//获得文档高度
var domhight = $(".page-risk-sumary .table-scrollable").get(0).scrollHeight;
if(scrollhight-17>=domhight-windowScrollhight){
pageNumber = (Number(pageNumber)+1)+"";
if(pageNumber<=showContent.totalPage){
showContent.getContractList({
"pageNumber":pageNumber,
"pageSize": "10",
"focus":"0"
});
}

     }

    });

这个17 是通过 domhight-windowScrollhight得到的,这个也就是滚动条到底部的距离。
</code>
很容易吧,这样就实现滚动分页了!!!
看下效果图:

img_6f13070d697612a2c0b43dab929adfe2.png
Paste_Image.png

好了,下班喽 ( _ )/~~拜拜

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MySQL---数据库从入门走向大神系列(十七)-JavaWeb分页技术实例演示2
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。 本例演示静态分页,也就是先设置好每页显示10行,再根据总行数,来算出总页数,并且只显示10个页码。
1187 0
MyBatis:实现简单物理分页(Plugin的使用)
MyBatis中的SqlSession接口中提供的分页功能的方法 // 获取sqlSession的步骤略,statement略,mapper中的映射语句为 // select * from users List list = sqlSession.
1541 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29187 0
用 React 分页显示数据
用react分页显示数据 去年年底,尝试着用react写个组件化的页面! demo地址 里面有一个list页面弄了一下数据的分页展示 展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton 父组件listBox c...
1293 0
linq查询集合并分页展示数据
private void Bind() { if (Request.QueryString["QuestionNo"] != null) { string QuestionNo = Request.
628 0
ecshop分页类assign_pager分析和扩展
ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页,他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数,你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。
933 0
打印分页css样式,style="page-break-after:always;"
style="page-break-after:always;" 今天客人反映说IE7打印不到Receipt内容,打印出来是空白的,而IE8下没有问题。
835 0
ssh整合问题总结--使用HibernateTemplate实现数据分页展示
  在进行大量的数据展示时,必须要使用分页查询,第一次使用在SSH框架整合中使用分页查询,遇到了一些问题,下面以我练习的项目为例详细介绍,如何在Spring+hibernate(+action)的环境下完成数据的分页查询.
842 0
+关注
55
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载