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 相关文章推荐
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
javascript 函数及作用域总结介绍
2013/11/12 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Django数据库表反向生成实例解析
2018/02/06 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python中metaclass原理与用法详解
2019/06/25 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
聊聊python中的异常嵌套
2020/09/01 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
培训讲师邀请函
2014/01/10 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
Spring实现内置监听器
2021/07/09 Java/Android
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android