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 性能优化指南 (1)
May 21 Javascript
javascript 常用方法总结
Jun 03 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
如何手写一个简易的 Vuex
Oct 10 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正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php桥接模式应用案例分析
2019/10/23 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
物业管理应届生求职信
2013/10/28 职场文书
表扬信格式
2014/01/12 职场文书
文明学生事迹材料
2014/01/29 职场文书
网络编辑职责
2014/03/01 职场文书
学习考察心得体会
2014/09/04 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL