jQuery custom content scroller

I'm using this jQuery plugin to scroll content. The problem I'm finding is sometimes, it does not scroll all the way to the bottom, meaning the sc开发者_如何转开发roll bar reaches the end, however it's only maybe 80% trough the content. Any ideas what could cause this? or any known fixes?

Thank you!

My gut says you have a box-model problem which is causing the height to be reported as something other than what you expect it to be. It could either be that you have content which is not contributing to the height (like floated or positioned elements), or non-content attributes (like padding or borders) which are not contributing to the height.

First, the non-contributing content:

Some DOM elements contribute to the parent element's height, and others don't. Specifically, elements with float attributes other than none, and elements with position attributes other than static.

If the problem is floated elements, you need to add another element that clears the float. The clearing element will appear below the floated content, and will contribute to the parent's height.

Consider this HTML:

<div class="wrapper">
    <div class="sidebar" style="float:right">
        Lots and lots of content here (very tall) ...
    </div>
    <div class="content">
        A little content here (shorter than sidebar)
    </div>
</div>

The height of the wrapper div will only consider the total height of the content div, and ignore the height of the sidebar.

To solve this problem, you need an element with a clear attribute at the bottom of your scrolling wrapper, like so:

<div class="wrapper">
  <div class="sidebar" style="float:right">
    Lots and lots of content here (very tall) ...
  </div>
  <div class="content">
    A little content here (shorter than sidebar)
  </div>
  <br style="clear:both" />
</div>

Now non-contributing non-content attributes:

Another thing to consider is that the height of an element doesn't consider padding, just what's inside the box. Consider this:

<div class="wrapper" style="padding:10px">
  <div class="content" style="height:100px">
    ...
  </div>
</div>

You might expect the height of the wrapper div to be 120px (100px plus the top and bottom padding of 10px each). However, its height is reported as just 100px since that's the height of its content.

The solution in that case is to make your scrolling wrapper have no padding, and use another elemenet to provide the padding:

<div class="wrapper">
  <div style="padding:10px">
    <div class="content" style="height:100px">
        ...
    </div>
  </div>
</div>

I don't know if either of these are actually your problem, but based on the description, these are my best guesses. Hope this helps!