will give you the inner height of the DIV. When
scrollTop + height >= scrollHeight
you are near the end of the DIV. That's a rough calculation: borders,
margins, paddings and the alignment of the planets can affect it.
$.fn.isNearTheEnd = function() {
return this[0].scrollTop + this.height() >= this[0].scrollHeight;
}
This should tell you if you're near the end of the scrolling area.
$('#content').isNearTheEnd(), returns true or false
- Ricardo
On Sep 29, 11:06 am, "gregpin...@gmail.com" <gregpin...@gmail.com>
wrote:
> On Sep 28, 10:54 pm, "gregpin...@gmail.com" <gregpin...@gmail.com>
> wrote:
>
>
>
> > 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
>
> Ok I think I figured it out. scrollTop() does return the height in
> pixels of an element, however it returns the sum of the heights of the
> children in the element, and not just the specified/apparent height of
> the element.
>
> So here is how I can detect when the scroll bar is close to the bottom
> of the element (untested):
>
> var effective_height_px = $('div#content div.gig').length * $
> ('div.gig').eq(0).height();
> if (($('div#content').scrollTop() / effective_height_px) > .9) {
> //reload
>
> }
>
> -Greg
No comments:
Post a Comment