jquery监听页⾯滚动条滚动事件
⼀、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺⼨相关函数：(document).height()  获取整个页⾯的⾼度(window).height()  获取当前也就是浏览器所能看到的页⾯的那部分的⾼度。这个⼤⼩在你缩放浏览器窗⼝⼤⼩时会改变，与document是不⼀样的scrollTop()    获取匹配元素相对滚动条顶部的偏移。scrollLeft()    获取匹配元素相对滚动条左侧的偏移。scroll([[data],fn])  当滚动条发⽣变化时触犯scroll事件jQuery检测滚动条到达底部代码：
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop()<=0){
alert("滚动条已经到达顶部为0");
}
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
alert("滚动条已经到达底部为" + $(document).scrollTop());
}
});
});
⼆、jQuery检测div中滚动条到达底部上半篇介绍了jQuery检测浏览器window滚动条到达底部，其实还并不理解scrollTop和scrollHeight概念，通常滚动条都是放在div中的。
<div id="div1" >
<div >
</div>
</div>
由于内部的div标签⾼度⽐外部的长，并且外部的div允许⾃动出现垂直滚动条，所以⽤浏览器打开后，可以看到垂直滚动条。
那么，这⾥的外部div 的scrollTop、scrollHeight 属性到底是什么呢？
实际上，在js代码⾥，滚动条是被抽象为⼀个“点”来对待的。scrollHeight其实不是“滚动条的⾼度”（b），⽽是表⽰滚动条需要滚动的⾼度，即内部div的⾼度750px。⽽scrollTop表⽰滚动条（⼀个点）当前的位置在750px⾥占了多少。
判断垂直滚动条是否到达底部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>下拉滚动条滚到底部了吗？</title>
<script language="javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0;  //滚动到的当前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
    　var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
});
</script>
<body>
<div id="div1" >
<div >IE 和 FF 下测试通过</div>
</div>
</body>
</html>
代码解说：
Processing math: 0%
内部div⾼度为750，外部div⾼度为500，所以垂直滚动条需要滚动750-500=250的距离，就会到达底部，参见语句nScrollTop + nDivHight >= nScrollHight。
程序中，在外部div的scroll（滚动）事件中侦测和执⾏if判断语句，是⾮常消耗CPU资源的。⽤⿏标拖拉滚动条，只要有⼀个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使⽤。
本⽰例判断的是没有⽔平滚动条的情况，在有⽔平滚动条时，情况会有细⼩的变化，所以nScrollTop + nDivHight >= nScrollHight语句中，需要⽤“>=”⽐较运算符，⽽没有⽔平滚动条的时候，等号“=”就⾜够了。⼤家可以实际测试⼀下。还可以判断⽔平滚动条是否滚动到头了。
三、jQuery滚动条到达底部加载数据
msg_list_loading = false;
$('.msg_list').on('scroll', function(){
jquery滚动条滚动到底部if ( ! msg_list_loading ){
load_more_msg();
}
})
function load_more_msg(){
var msg_list = $('.msg_list');
if (nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight ) {
msg_list_loading = true;
msg_list.append('<div class="loading"></div>');
$.get('ajax_data.html').done(function( data ){
msg_list.find(".loading").remove();
msg_list.append( data );
msg_list_loading = false;
});
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。