jQuery检测滚动条是否到达底部


Posted in Javascript onDecember 15, 2015

一、jQuery检测浏览器window滚动条到达底部
jQuery获取位置和尺寸相关函数:
$(document).height()    获取整个页面的高度
$(window).height()    获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的
scrollTop()    获取匹配元素相对滚动条顶部的偏移。
scrollLeft()    获取匹配元素相对滚动条左侧的偏移。
scroll([[data],fn])    当滚动条发生变化时触犯scroll事件
jQuery检测滚动条到达底部代码:

$(document).ready(function() {
  $(window).scroll(function() {
 
    if ($(document).scrollTop()<=0){
      alert("滚动条已经到达顶部为0");
    }
 
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
  });
});

二、jQuery检测div中滚动条到达底部
上半篇介绍了jQuery检测浏览器window滚动条到达底部,其实还并不理解scrollTop和scrollHeight概念,通常滚动条都是放在div中的。

jQuery检测滚动条是否到达底部

如下检测id为scroll_div滚动条到达底部事件:

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于3water.com三水点靠木<br>
        来自于3water.com三水点靠木<br>
        来自于3water.com三水点靠木<br>
      </div>
    </div>

首先需要理解几个概念:
scrollHeight:表示滚动条需要滚动的高度,即内部div,10000px
scrollTop: 表示滚动条滚动的高度,可能大于外部div 500px
也就是说scrollDiv的高度+scrollTop滚动的最大高度=scrollHeight
于是检测div中div滚动条高度就简单了:

$(document).ready(function() {
  $("#scroll_div").scroll(function(){
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      alert("到达底部了");
    }
  });
});

如果是异步加载数据,数据没加载完,又触犯了同一页的数据加载请求,我通常是加一个flag

$(document).ready(function() {
  var flag = false;
  $("#scroll_div").scroll(function(){
    
    if(flag){
      //数据加载中
      return false;
    }
    
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      //请求数据
      flag = true;
      alert("到达底部了");
    }
  });
});
Javascript 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
常用的javascript设计模式
Jan 11 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
js实现根据身份证号自动生成出生日期
Dec 15 #Javascript
浅析javascript的return语句
Dec 15 #Javascript
轻松学习Javascript闭包函数
Dec 15 #Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 #Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 #Javascript
js编写贪吃蛇的小游戏
Aug 24 #Javascript
javascript实现网页端解压并查看zip文件
Dec 15 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
python对字典进行排序实例
2014/09/25 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python中return如何写
2020/06/18 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python logging模块的使用
2020/09/07 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
客户经理竞聘演讲稿
2014/05/15 职场文书
电子工程求职信
2014/07/17 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
财务会计实训报告
2014/11/05 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
会议主持词通用版
2019/04/02 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Android中的Launch Mode详情
2022/06/05 Java/Android