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函数作用域和提前声明 分享
Aug 22 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
详解JavaScript 作用域
Jul 14 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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学习之整理字符串
2011/04/17 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
js 替换
2008/02/19 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python样条插值的实现代码
2018/12/17 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Python如何定义有默认参数的函数
2020/08/10 Python
详解如何修改python中字典的键和值
2020/09/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
超市端午节活动方案
2014/01/23 职场文书
机械个人求职信范文
2014/01/24 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
仓库规划计划书
2014/04/28 职场文书
书香校园建设方案
2014/05/02 职场文书
招股说明书范本
2014/05/06 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
python字符串的一些常见实用操作
2022/04/06 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs