jquery如何实现滚动自动加载

Question

滚动鼠标滚轮到指定位置页面加载新的内容，求具体点的解决方法

Answer 1

推荐hammer.js，去官方网站看下吧，里面有滚动加载的demo。。

Answer 2

原理：检测当前位置，当位置到了就触发加载内容的事件。
上面答案说得挺完善的了。

$(document).scrollTop()是滚动条距离顶部的距离；
$(window).height()是可视页面的的高度；
$(document).height()是文档高度

Answer 3

前提：引入jquery文件。

html

<div id="app">
    <header></header>
    <div id="search"></div>
    <div id="content">
        啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>
        啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>啊<br/>
    </div>
    <footer></footer>
</div>

css

*{
        margin: 0;
        padding: 0;
}
#app{
    width: 320px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
}
header{
    width: 100%;
    height: 50px;
    background: orange;
}
#search{
    width: 100%;
    height: 30px;
    background: pink;
}
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: blue;
}
#content{
    position: absolute;
    top: 80px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
}

js

$(function(){  
    $('#content').scroll(function(){
        var scrollTop = $(this).scrollTop();
        var height = $(this).height();
        var scrollHeight = $(this)[0].scrollHeight;
        if(scrollTop + height >= scrollHeight){//关键
            console.log('load');
        }
    })
});

Answer 4

骚年，还在做烂大街的pinterest？

$(window).bind("scroll",function() {
        ($(document).scrollTop() + $(window).height() > $(document).height() - 30)&&yourDemoFunction();
    });

这个是离底部还有30px触发yourDemoFunction()，不用谢，请叫我红领巾