Question

I have an element that is dynamically resized by code from a plugin.
its the custom scroll bar plug in located Here.

So I’m using it for this little global chat thing I’m making, and basically, I’m polling the database to see if there are new messages, and if there are I’m updating the chat box and resizing. THat all works fine.

Whats not working correctly, is that I have it set to auto scroll to the bottom on each update. However this can be annoying if youre trying to look at things in the past at the top of the box. So basically I’m thinking that I can check to see if the sliderule of the scroll bar is at the exact bottom then keep it there using the plugins bottom function. But if its not at exactly 0 then just leave it where it is.

However, I’m unaware of a jquery function to that gets bottom on the fly like that.

When i try

alert($('.mCSB_container').css('bottom'));

its just saying : auto;

Anyone know of a function or way to calculate this?

Heres the html rendered by the plugin:

<div id="chat_messages_wrap" class="scrollbox mCustomScrollbar _mCS_1">
   <div class="mCustomScrollBox" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
      <div class="mCSB_container mCS_no_scrollbar" style="position: relative; top: 0px; ">                                              
         <div class="message_wrap" id="message_57">
            <span class="message_time">Mon Oct 08 2012 17:57:01</span>
            <div class="message_avatar_wrap"><img src="..."></div>
            <div class="message_message_wrap">
               <span class="message_username">EyeptchsRLame</span>
               <p class="message_message">hey there</p>
            </div>
            <div class="message_divider"></div>
         </div>
      </div>
      <div class="mCSB_scrollTools" style="position: absolute; display: none; ">
         <a class="mCSB_buttonUp" style="display:block; position:relative;"></a>
         <div class="mCSB_draggerContainer" style="position:relative;">
            <div class="mCSB_dragger" style="position: absolute; top: 0px; ">
               <div class="mCSB_dragger_bar" style="position:relative;"></div>
            </div>
            <div class="mCSB_draggerRail"></div>
         </div>
         <a class="mCSB_buttonDown" style="display:block; position:relative;"></a>
      </div>
   </div>
</div>

Answer 1

You can find the bottom of an element by finding top value then adding the height

var obj = $('.mCSB_container');
var bottom = obj.position().top + obj.height();