1、监听整个demo的滚动
<script>
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop == 0){
alert('触顶');
}
if(scrollTop + windowHeight == scrollHeight ){
alert('下拉到底了');
}
})
})
</script>
2、有可能只是一个小div,设置了超出后滚动的属性 overflow: scroll;
先上代码:
<script>
$('要监听的对象').on('scroll',function(){
var scrollHeight = this.scrollHeight;
var scrollTop = this.scrollTop;
var clientHeight = this.clientHeight;
// 注意:下面这种写法是无效的:
// var clientHeight = $('要监听的对象').clientHeight;
if(scrollTop == 0){
alert('触顶');
}
if(scrollTop + clientHeight == scrollHeight){
alert('下拉到底了');
}
})
</script>
监听div的滚动的时候会有一些问题
1、需要用对象.on
事件或者对象.scroll
事件来监听
2、在事件的内部,需要用this
来获取滚动的位置,而不能再次使用jq的对象