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 相关文章推荐
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
React学习笔记之事件处理(二)
Jul 02 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP 类型转换函数intval
2009/06/20 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
python里使用正则的findall函数的实例详解
2017/10/19 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python让函数不返回结果的方法
2020/06/22 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
个人安全生产承诺书
2014/05/22 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
单位作风建设自查报告
2014/10/23 职场文书
云台山导游词
2015/02/03 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
素质拓展训练感想
2015/08/07 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python