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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
loading动画特效小结
Jan 22 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
小程序实现录音上传功能
Nov 22 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
自我鉴定范文
2013/11/10 职场文书
农村党支部先进事迹
2014/01/14 职场文书
收银员岗位职责
2014/02/07 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
销售顾问岗位职责
2014/02/25 职场文书
建筑工地质量标语
2014/06/12 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
技术转让协议书
2016/03/19 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python