jQuery实现判断滚动条滚动到document底部的方法分析


Posted in jQuery onAugust 27, 2019

本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下:

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。

在js当中也没有提供滚动条的高度API。

参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为

滚动条滚动的高度+浏览器视口的高度>=document的高度。

参考网上资料,具体代码如下:

//滚动条在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;
    windowHeight = document.documentElement.clientHeight;
    return windowHeight;
}
window.onscroll = function() {
    if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
      alert("you are in the bottom!");
    }
};

jquery实现代码:

$(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");
  }
});

代码测试有效果。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
You might like
PHP获取数组的键与值方法小结
2015/06/13 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php中错误处理操作实例分析
2019/08/23 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript 函数使用说明
2010/04/07 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
详解在React里使用"Vuex"
2018/04/02 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
Python 远程开关机的方法
2020/11/18 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
数据库面试要点基本概念
2013/10/31 面试题
教师个人的自我评价分享
2014/01/02 职场文书
家长会演讲稿范文
2014/01/10 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
雷峰塔导游词
2015/02/09 职场文书
四年级数学教学反思
2016/02/16 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
详解Vue slot插槽
2021/11/20 Vue.js