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里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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
重置版宣传动画
2020/04/09 魔兽争霸
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP编写RESTful接口
2016/02/23 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
服务器安全设置的几个注册表设置
2007/07/28 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
在Python中COM口的调用方法
2019/07/03 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
东方通信股份有限公司VC面试题
2014/08/27 面试题
简历中自我评价分享
2013/10/09 职场文书
执行力心得体会
2013/12/31 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
小学庆六一活动方案
2014/02/28 职场文书
治超工作实施方案
2014/05/04 职场文书
升职演讲稿范文
2014/05/23 职场文书
校长一岗双责责任书
2015/05/09 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python