一个用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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
smarty内置函数section的用法
2015/01/22 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Django多个app urls配置代码实例
2020/11/26 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书