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 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
javascript History对象原理解析
Feb 17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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 cookies中删除的一般赋值方法
2011/05/07 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
快速入手Python字符编码
2016/08/03 Python
python正则实现计算器功能
2017/12/14 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
物流专业求职计划书
2014/01/10 职场文书
全国文明单位申报材料
2014/05/31 职场文书
社团活动总结报告
2014/06/27 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
党支部评议意见
2015/06/02 职场文书