html超出高度自动下一页,上滑web页面自动加载下一页

移动端常常是通过向上滑动到页面底部自动加载下一页内容，而不是点击“下一页”按钮进行加载。这是一个演示了自动加载下一页的小demo。

html:

html>

向上滑动自动加载后续页面

js:

var page_example = {

pageNo:1,

init:function(){

for(var i = 0;i 

var html = '

' +

'

' +

' 第1页  項目' + i +

'

' +

'

' +

' 內容' + i +

' 

 ' +

' 

';

$("#content").append(html);

}

},

loadContent:function(pageNo){

for(var i = 0;i 

var html = '

' +

'

' +

' 第'+pageNo+'页  項目' + i +

'

' +

'

' +

' 內容' + i +

' 

 ' +

' 

';

$("#content").append(html);

}

}

}

$(function(){

page_example.init();

$(window).scroll(function(){

var mybody = document.body;

//FF支持document.documentElement.scrollTop，chrome支持document.body.scrollTop

if(mybody.scrollHeight-mybody.clientHeight <= (mybody.scrollTop | document.documentElement.scrollTop)+5){

console.log('加载下一页');

page_example.pageNo++;

page_example.loadContent( page_example.pageNo)

}

});

});

css:

html,body{

height:100%;

}

mon-greyframe{

background: #f0f0f0;

padding: 0.5em;

}

mon-items{

border: 0.1em solid #8c8b8a;

border-radius: 0.3em;

background: #FFFFFF;

margin: 0.5em;

}

mon-usercontent{

font: 0.8em sans-serif;

color:#000000;

padding: 0.5em 0.5em 0 0.5em;

}

mon-school,mon-previewcontent{

font: 0.6em "sans-serif";

color:#c4c4c4;

padding: 0.2em 0.5em 0.5em 0.5em;

}

演示：

地址：http://sandbox.runjs/show/a3w4ayie