一个用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 相关文章推荐
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
javascript实现动态时钟的启动和停止
Jul 29 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python 伯努利分布详解
2020/02/25 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python实现区域填充的示例代码
2021/02/03 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
Weblogc domain问题
2014/01/27 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
思想品德自我评价
2014/02/04 职场文书
家庭经济困难证明
2015/06/23 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python