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之Document元素选择器篇
Aug 14 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue实现axios图片上传功能
Aug 20 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
vue动态设置路由权限的主要思路
Jan 13 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模板类代码
2008/09/07 PHP
php 设计模式之 单例模式
2008/12/19 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
PHP 验证码的实现代码
2011/07/17 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
php生成HTML文件的类方法
2019/10/11 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python 基础教程之Map使用方法
2017/01/17 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python实现两张图片的像素融合
2019/02/23 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
师生聚会感言
2014/01/26 职场文书
高三体育教学反思
2014/01/29 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
检察院起诉意见书
2015/05/20 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript