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

  次阅读 来源:互联网(转载协议) 2016-01-26 10:59 我要评论(0)

这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height() 与$(window).height()的区别,需要的朋友可以参考下

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

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...