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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
react MPA 多页配置详解
Oct 18 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
layui表格数据重载
2019/07/27 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
django_orm查询性能优化方法
2018/08/20 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python集合常见运算案例解析
2019/10/17 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
环保公益广告语
2014/03/13 职场文书
读群众路线的心得体会
2014/09/03 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
环保守法证明
2015/06/24 职场文书
运动会新闻报道稿
2015/07/22 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python