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 json2 使用方法
Mar 16 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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
文章推荐系统(二)
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
推荐下python/ironpython:从入门到精通
2007/10/02 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
基于Python List的赋值方法
2018/06/23 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python字典的值可以修改吗
2020/06/29 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
策划助理岗位职责
2013/11/18 职场文书
语文课外活动总结
2014/08/27 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL