一个用jquery写的判断div滚动条到底部的方法【推荐】


Posted in Javascript onApril 29, 2016

jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。

我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。

一、滚动条有关属性的正确理解:

假设有以下Html代码:

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后,可以看到垂直滚动条。滚动条向下拖动一段距离,看到的页面效果如下(右部的a、b是我抓图后,用PS标出来的):

一个用jquery写的判断div滚动条到底部的方法【推荐】

那么,这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢?

有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。

其实,图中标出的a、b,对我们编程写js代码没有任何具体意义,它仅仅具有象征意义。

实际上,在js代码里,滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”(b),而是表示滚动条需要滚动的高度,即内部div的高度750px。而scrollTop表示滚动条(一个点)当前的位置在750px里占了多少,不是图中标出的a。

这时,我们很叹服Windows的设计者,滚动条设计的如此形象美妙,欺骗了多少头脑简单的鼠标操作员。a和b的距离分别标识滚动条滚动了和需要滚动的距离,它们之间分别有一个对应的关系,但这些不是我们这些开发应用程序的程序员考虑的,是设计操作系统GUI图形接口的程序员考虑的。

2判断垂直滚动条是否到达底部

廓清了以上的概念,编码其实就比较简单了, 以下是示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>下拉滚动条滚到底部了吗?</title>
   <script language="JavaScript" src="jQuery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
   <script language="javascript">
   $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();

    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
   });
   </script>
  <body>
  <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
   <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
  </div>
  </body>
  </html>

代码解说:

内部div高度为750,外部div高度为500,所以垂直滚动条需要滚动750-500=250的距离,就会到达底部,参见语句nScrollTop + nDivHight >= nScrollHight。

程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。

本示例判断的是没有水平滚动条的情况,在有水平滚动条时,情况会有细小的变化,所以nScrollTop + nDivHight >= nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条的时候,等号“=”就足够了。大家可以实际测试一下。还可以判断水平滚动条是否滚动到头了。

以上这篇一个用jquery写的判断div滚动条到底部的方法【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Javascript实现简易天数计算器
May 18 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 #Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 #Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 #Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 #Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 #Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 #Javascript
You might like
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
pandas数据集的端到端处理
2019/02/18 Python
python配置文件写入过程详解
2019/10/19 Python
Python集合操作方法详解
2020/02/09 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
一些PHP的面试题
2015/05/06 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
四年级数学教学反思
2014/02/02 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
《藏戏》教学反思
2014/02/11 职场文书
《社戏》教学反思
2014/04/15 职场文书
节约用水演讲稿
2014/05/21 职场文书
小学开学标语
2014/07/01 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
合同纠纷调解书
2015/05/20 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android