移动端滚动加载更多

项目需求，滑到手机底部可以加载更多。网上查了下资料，结合自己实际情况，记录下以便使用。

<a href="javascript:void(0)" id="gengduo_button" page="2" style="display:none"></a>
<input id="interval" type="hidden" value="0">

然后是jQuery部分的代码

$(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            $(function(){
                var num=10;//显示个数
                var page=$("#gengduo_button").attr('page');//第几个分页
                var nodata=$("#gengduo_button").attr('nodata');//判断是否有数据
                if(page){
                    page=parseInt(page)+1;
                }else{
                    page=1;
                }
                $.ajax({
                    type:"post",
                    url:"info.php",
                    data:{page:page},
                    dataType:"JSON",
                    success:function (msg) {
                        $("#gengduo_button").attr("page",msg.data.page.page)                        
                    }

                })
            })      
        }
    });

其中，三个属性值：

scrollTop为返回或设置匹配元素的滚动条的垂直位置。

clientHeight为网页(内容)可见区域高。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。