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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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
php 上传功能实例代码
2010/04/13 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python设计模式大全
2016/06/27 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python实现简单http服务器功能
2018/09/17 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
工厂实习感言
2014/01/14 职场文书
yy婚礼主持词
2014/03/14 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
公司担保书范文
2014/05/21 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
运动会表扬稿范文
2015/05/05 职场文书
关于童年的读书笔记
2015/06/26 职场文书
学习雷锋主题班会
2015/08/14 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Win11更新失败并提示0xc1900101
2022/04/19 数码科技