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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现放大镜案例
Oct 19 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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
js select常用操作控制代码
2010/03/16 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
ipython和python区别详解
2019/06/26 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
学生干部学习的自我评价
2014/02/18 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
探亲假请假条
2014/04/11 职场文书
销售经理工作检讨书
2015/02/19 职场文书
村官个人总结范文
2015/03/03 职场文书
爱心募捐通知范文
2015/04/27 职场文书
python多线程方法详解
2022/01/18 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android