0

我有一个由插件中的代码动态调整大小的元素。它的自定义滚动条插件位于此处。

所以我将它用于我正在制作的这个小型全球聊天内容，基本上，我正在轮询数据库以查看是否有新消息，如果有，我正在更新聊天框并调整大小。一切正常。

什么不能正常工作，是我将它设置为在每次更新时自动滚动到底部。但是，如果您试图在框的顶部查看过去的事情，这可能会很烦人。所以基本上我在想我可以检查滚动条的滑块是否在确切的底部，然后使用插件底部功能将其保持在那里。但是，如果它不完全为 0，则将其留在原处。

但是，我不知道有一个 jquery 函数会像那样动态地触底。

当我尝试

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

它只是说：自动；

有人知道计算这个的函数或方法吗？

这是插件呈现的html：

<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>
4

2 回答 2

1

您可以通过找到顶部值然后添加高度来找到元素的底部

var obj = $('.mCSB_container');
var bottom = obj.position().top + obj.height();
于 2012-10-08T23:23:21.987 回答
1

正如 RTF 建议position()的那样，不考虑元素的填充、边框和边距。

您想使用jQuery 函数offset().top来查找渲染元素的top（也就是与文档顶部的距离），然后添加总渲染高度，其中包括所选元素的边框、填充和（如果此函数的参数是设置为) 边距。outerHeight()true

它看起来像这样：

var container  = $('.mCSB_container'),
    top        = container.offset().top,
    height     = container.outerHeight(true),   // true to include margin
    bottom     = top + height + "px";           // add "px" so the browser has a unit to work with

console.log(bottom);
于 2014-09-14T02:36:23.323 回答