<! Doctype=html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<script src= "Https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" ></script>
<!--<script src= "js/jquery.js" type= "Text/javascript" ></script> if you have a jquery file locally you can use the
<script type= "Text/javascript" >
$ (document). Ready (function () {
var range = 0; Distance below boundary length/unit px
var elemt = 500; Insert element height/unit px
var maxnum = 20; Set the maximum number of loads
var num = 1;
var totalheight = 0;
var main = $ ("#content"); Main element
$ (window). Scroll (function () {
var Srollpos = $ (window). scrolltop (); The distance from the top of the scroll bar (the page exceeds the height of the window)
Console.log (The vertical height of the scroll bar to the top: +$ (document). ScrollTop ());
Console.log ("Document height of the page:" +$ (documents). Height ());
Console.log (' Browser height: ' +$ (window). Height ());
Totalheight = parsefloat ($ (window). Height ()) + parsefloat (srollpos);
if ($ (document). Height ()-range) <= totalheight && num! = maxnum) {
Main.append ("<div style= ' border:1px solid Tomato;margin-top:20px;color: #ac" + (num%20) + (num%20) + "; Height:" +elemt + "' >hello World" +srollpos+ "---" +num+ "</div>");
num++;
}
});
});
</script>
<body>
<div id= "Content" style= "height:960px" >
<div id= "Follow" >this is a scroll test;<br/> page dropdown auto Load content </div>
<div style= ' border:1px solid tomato;margin-top:20px;color: #ac1; height:800 ' >hello World Test div</div>
</div>
</body>
jquery implementation pull-down loads more