<script type="text/javascript">
//滚动条到页面底部加载更多案例
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
// console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
//滚动条到达底部
alert(3)
}else if(scrollTop<=0){
//滚动条到达顶部
alert(4)
//滚动条距离顶部的高度小于等于0 TODO
}
});
</script>
如果设置了样式CSS,会使得滚动事件失效
html, body {
height: 100%; //若是需要Y轴滚动条,会事件失效应该注释
width:100% //若是需要X轴滚动条,会事件失效应该注释
}
对应设置,overflow:sroll出现滚动条
body {
line-height: 1;
overflow:sroll;
font-size:62.5%;
font-family:"microsoft Yahei",Arial, Helvetica, sans-serif
}