JS鼠标滚动分页效果示例


Posted in Javascript onJuly 05, 2017

首先先看问题:

JS鼠标滚动分页效果示例

在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。

解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉。最简单的办法就是不分页(^_^)

但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页!

问了其他同事,其他同事也。。。你去百度去。。。。

是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图。。。坑

经过一番思考,和百度 思路来了:

需要了解三个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 是离滚动窗口的顶部的距离,还有就是要计算这个滚动条离底部的距离 ,要不然滚动事件会多次触发,还会出现往上滚动触发。

相关实现代码:

//滚动进行分页
    $(".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得到的,这个也就是滚动条到底部的距离。

很容易吧,这样就实现滚动分页了!!!

看下效果图:

JS鼠标滚动分页效果示例

以上所述是小编给大家介绍的JS鼠标滚动分页效果示例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python PIL库图片灰化处理
2020/04/07 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
安全标准化汇报材料
2014/02/03 职场文书
公司承诺书范文
2014/05/19 职场文书
大学迎新标语
2014/06/26 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
军事理论课感想
2015/08/11 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python