jQuery scroll事件实现监控滚动条分页示例

转载 2016年05月31日 16:40:09

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标记 滚动时方便查看-->

jquery 滚动条分页加载数据

废话不多说  直接撸 1.引入两个js文件,必须jquery第一个 2.网页头写一个脚本 $(document).ready(function (){ //启动函数 $("#tra...
  • woshidashuaibi
  • woshidashuaibi
  • 2015年12月04日 14:53
  • 475

手机端滑动分页代码思路

//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面 //实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后...
  • qq_19318067
  • qq_19318067
  • 2015年09月28日 16:31
  • 1266

拖动浏览器滚动条实现分页demo

  • 2013年01月10日 11:39
  • 12.13MB
  • 下载

Swing下滚动条实现仿分页

  • 2016年10月28日 14:44
  • 42KB
  • 下载

jQuery上下滚动效果,jquery无缝滚动,仿新浪微博大厅滚动

新浪微博未登录首页有一个“大家正在说”的模块,动态滚动最新发布的微博。从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下: 1 内容持续滚动; 2 新微博将下面...
  • gengyudan
  • gengyudan
  • 2013年04月22日 18:51
  • 3651

页面滚动分页---iScroll实例:下拉刷新,滚动翻页

  • 2015年08月10日 11:42
  • 13KB
  • 下载

iscroll移动app滚动分页demo

  • 2015年07月08日 08:18
  • 14KB
  • 下载

滚动条只让行分页列不分页

需求背景 对报表展现页面加上滚动条标签,默认行和列都不分页了。但实际需求是希望只让报表行分页,列是不分页的。  实现方法 在JSP中加入needPagedScroll=”yes”,加上这个设置好...
  • rqgxy
  • rqgxy
  • 2016年11月29日 10:02
  • 149

滚动条分页/滚动条事件触发

使用jquery框架实现滚动条分页/滚动条事件触发,简单明了 //滚动条事件 record-dataTable-tbody是被滚动的标签的ID,可以是div,table,table里面的tbody等...
  • maxoracle
  • maxoracle
  • 2016年09月14日 10:50
  • 1018

为什么jQuery不能监听body的滚动事件呢?

有如下测试,发现不管用: $(document.body).scroll(function (e) { alert('我滚动了'); }); 查阅资料发现: ...
  • jie1336950707
  • jie1336950707
  • 2015年10月18日 13:09
  • 3178
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery scroll事件实现监控滚动条分页示例
举报原因:
原因补充:

(最多只允许输入30个字)