jQuery实现判断滚动条到底部


Posted in Javascript onJune 23, 2015

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

废话不多少说,赶紧上代码(兼容不同的浏览器)。

lazyload.js


//滚动条在Y轴上的滚动距离 
 function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;

if(document.body){


bodyScrollTop = document.body.scrollTop;

}

if(document.documentElement){


documentScrollTop = document.documentElement.scrollTop;

}

scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

return scrollTop;
} 
 //文档的总高度 
 function getScrollHeight(){

var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;

if(document.body){


bodyScrollHeight = document.body.scrollHeight;

}

if(document.documentElement){


documentScrollHeight = document.documentElement.scrollHeight;

}

scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

return scrollHeight;
} 
 //浏览器视口的高度 
 function getWindowHeight(){

var windowHeight = 0;

if(document.compatMode == "CSS1Compat"){


windowHeight = document.documentElement.clientHeight;

}else{


windowHeight = document.body.clientHeight;

}

return windowHeight;
} 
 window.onscroll = function(){

if(getScrollTop() + getWindowHeight() == getScrollHeight()){


alert("you are in the bottom!");

}
};

lazyload-jQuery.js

$(window).scroll(function(){
var scrollTop = $(this).scrollTop();

var scrollHeight = $(document).height();

var windowHeight = $(this).height();

if(scrollTop + windowHeight == scrollHeight){


alert("you are in the bottom");

}
});

lazyLoad.html

<!doctype html>
<html lang="en" style="height:900px;">
 <head>
 <meta charset="UTF-8">
 <meta name="Author" content="forever">
 <link rel="stylesheet" href="css/lazyload.css" />
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 <title>lazyLoad</title>
 <script type="text/javascript">
   
  $(function(){
    var $ul=$("#lazyLoadWrap").find("ul");
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
     if(scrollTop + windowHeight == scrollHeight){
          for(var i=0;i<6;i++){
            $ul.append("<li>Hello</li>");
          }

     }
    });
  });
 </script>
 </head>
 <body>
  <div id="lazyLoadWrap">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li>12</li>
    </ul>
  </div>
 </body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
js判断节假日实例代码
Dec 27 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 #Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 #Javascript
javascript创建函数的20种方式汇总
Jun 23 #Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 #Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 #Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 #Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
给多个地址发邮件的类
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php类的定义与继承用法实例
2015/07/07 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php strftime函数的详细用法
2018/06/21 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js返回顶部实例分享
2016/12/21 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python实现ipsec开权限实例
2014/11/11 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python读写Excel表格的方法
2021/03/02 Python
天鹅的故事教学反思
2014/02/04 职场文书
汉语言文学职业规划
2014/02/14 职场文书
趣味比赛活动方案
2014/02/15 职场文书
酒店端午节促销方案
2014/02/18 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
七夕情人节问候语
2015/11/11 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android