jquery滚动条滚动到底部 jq滚动到底部加载更多

一、

很多网页都有下滑加载更多功能，自己也像模仿这样的效果。

首先理一理思路，下滑加载更多内容，是通过鼠标滚轮事件实现，所以我们首先要给鼠标滚轮添加监听事件，百度学习了一下原生js实现这个偏复杂，所以还是决定踩在巨人的肩膀（jq）上前进，jq里面有一个鼠标滚轮监听的方法，如下：

$(window).scroll(function(){...............});

能监听到鼠标滚轮事件后，接下来便是想方设法，监听到，滚轮滚到网页底部时，触发相应事件，jq依然很方便地提供了三个方法去获取：滚轮滚动的距离、网页的显示区域的高度、网页的总高度

var scrollTop = $(this).scrollTop();            //滚轮滚动的距离
var windowHeight = $(this).height();            //网页的显示区域的高度
var scrollHeight = $(document).height();    //网页的总高度

获取到了这三个属性后，一切问题就变得很简单了

// 下滑加载更多
$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();            //滚轮滚动的距离
    var windowHeight = $(this).height();            //网页的显示区域的高度
    var scrollHeight = $(document).height();    //网页的总高度
    if (scrollTop + windowHeight >= scrollHeight) {
            //此处进行相应dom添加的方法，我喜欢把他封装成一个函数，然后在这里调用
    }

});

 

二、

用了以上方法，可以达到监听滚轮下滑到最低端之际，触发一些事件，但是，随着我接下来的深入，我发现以上方法有一些弊端，如果有dom操作，重新渲染整个页面，那么这个sroll()方法会一直触发，不会根据新dom而触发新的sroll()滚轮方法，所以更新dom后不会达到理想的效果。

$ (window).unbind ('scroll');

这个方法，可以关闭 jq 的sroll()方法，然后，当你dom更新后，再次触发sroll()方法，达到理想效果

 

三、

如果网页中有iframe，有多个sroll()方法，那么我想关闭固定的某个sroll()方法，借鉴一些大神的代码，换一种sroll()方法的写法也可以达到这样的效果：

var $WINDOW = $(window);
$WINDOW.on('scroll.myScroll',function(){
    if(this.scrollTop >= 700){
        $('.box-tab-nav').children('.active').trigger("click");
        $WINDOW.off('.myScroll');
    }
});