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之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
javascript history对象详解
2017/02/09 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
原生js二级联动效果
2017/06/20 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python写的一个简单监控系统
2015/06/19 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python代码注释规范代码实例解析
2020/08/14 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
初中学生期末评语
2014/04/24 职场文书
销售团队获奖感言
2014/08/14 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
代理人委托书
2014/09/16 职场文书
周年庆典答谢词
2015/01/20 职场文书
党委工作总结2015
2015/04/27 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
windows系统安装配置nginx环境
2022/06/28 Servers