javascript - How to only show a specific number of divs on the page and load more when the user scrolls to the bottom? -

there 6 divs have same class. how make first 3 divs shown on page , when user scrolls bottom of page, other 3 divs shown?

also, there may not 6 divs. let's there 12 divs, code still need show first 3 divs , keep showing 3 more when user scrolls bottom of page.

<div class="post"> lorem </div>  <div class="post"> lorem ipsum </div>  <div class="post"> lorem ipsum .... </div>  <div class="post"> lorem... </div>  <div class="post"> loremsdfdsf </div>  <div class="post"> lorem....... </div> 

i have managed find http://jscroll.com/ requires include href link @ bottom of page file display when user scrolls end.

you can use jquery's convenient method scrolltop() , capture scroll event scroll(). check if scroll far enough , if yes - load new content.