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 相关文章推荐
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
Javascript动画效果(3)
Oct 11 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
js实现飞机大战小游戏
Aug 26 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
php调用mysql数据 dbclass类
2011/05/07 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python字符串格式化输出方法分析
2016/04/13 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python3内置模块random随机方法小结
2019/07/13 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python操作redis数据库的三种方法
2020/09/10 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
技校毕业生自荐书
2014/05/23 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年市场部工作总结
2014/11/25 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
入党转正介绍人意见
2015/06/03 职场文书
边城读书笔记
2015/06/29 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书