This is a sample to do page lazy loading while mouse scrolling.
One next page button was given for non-scrolling event trigger situation.
<!DOCTYPE html>
<html>
<header>
<title>
This is a auto expanding page
</title>
<style>
.reset{
margin: 0 0 0 0;
width: 100%;
height: auto;
border: 1px solid gray;
overflow-y: auto;
overflow-x: hidden;
}
div[id=frameDiv] div {
display: block;
margin: 0 0 0 0;
width: 100%;
height: 20px;
border: 1px solid black;
background-color: pink;
}
</style>
<script language="JavaScript" src="jquery.min.js"></script>
<script>
Gloable_ArticleHeight = 20;
function initState(){
var wheight = Math.floor(window.innerHeight/Gloable_ArticleHeight);
aGener(wheight);
}
function aGener(wheight){
for (var i = 0; i < wheight; i++){
$("#frameDiv").append("<div>Article "+ i + "</div>");
}
}
var fScroll = "true";
var sCount = 0;
$(document).ready(function(){
$(this).scroll(function(){
if(fScroll == "true"){
aGener(Math.floor(window.innerHeight/Gloable_ArticleHeight));
fScroll = "false";
sCount++;
}else if($(this).scrollTop()/sCount >= window.innerHeight){
console.log($(this).scrollTop() + " " +sCount + " " + $(this).scrollTop()/sCount);
aGener(Math.floor(window.innerHeight/Gloable_ArticleHeight));
sCount++;
}
});
});
</script>
</header>
<body οnlοad="initState()" οnresize="initState()">
<div id="frameDiv" class="reset">
</div>
<div id="footerDiv" style="display: block; position: static; width: 100%; height: 30px; top:100px; background-color: rgb(203,210,200); z-index:2;">
<input type="button" value="Next Page" size="30" style="height: 25px;"/>
</div>
</body>
</html>
Testing Result: