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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
详解Vue数据驱动原理
Nov 17 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 判断字符串中是否包含html标签
2014/02/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
Python编写登陆接口的方法
2017/07/10 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
详解django.contirb.auth-认证
2018/07/16 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
志愿者活动总结
2014/04/28 职场文书
品酒会策划方案
2014/05/26 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python