[jQuery] Infinite Scroll within a div element - How detect relative scroll position?
How can I detect when the user has scrolled near the end of a div with
a scroll bar so that I can add more content?
I tried something like this:
$('div#content').scroll(function(){
if ($('div#content').scrollTop() == 9083){
get_more_content();
}
});
But I don't really understand what scrollTop() is returning. When I
first load the page scrolling to the bottom of that div has scrollTop
returning 9083, but after I add more content and scroll to the end, it
gives 13,000 something.
What's the formula for taking what scrollTop() is giving me and
figuring out if I am near the end?
If it helps, here's my basic HTML and CSS:
<body>
<div id="content">
...lots of content
</div>
</body>
I have CSS so that div#content gets a scroll bar:
div#content {
margin-left:auto;
margin-right:auto;
width:850px;
height:600px;
overflow:auto;
border-style:solid;
border-width:1px;
margin-bottom:30px;
}
Thanks in advance,
Greg