jQuery scroll事件实现监控滚动条分页示例


Posted in Javascript onApril 04, 2014

scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时;
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

注意:(window).height()和(document).height()的区别

jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

自己做个实验就知道了
$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 #Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
单击和双击事件的冲突处理示例代码
Apr 03 #Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
You might like
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python正则表达式使用范例分享
2016/12/04 Python
python 生成器协程运算实例
2017/09/04 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Python如何将模块打包并发布
2020/08/30 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
公司新员工的演讲稿注意事项
2014/01/01 职场文书
淘宝好评语大全
2014/05/05 职场文书
情况说明书格式范文
2014/05/06 职场文书
活动总结格式
2014/08/30 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
预备党员个人总结
2015/02/14 职场文书
学风建设主题班会
2015/08/17 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript