0

プラグインからのコードによって動的にサイズ変更される要素があります。ここにあるカスタムスクロールバープラグイン。

ですから、私が作成しているこの小さなグローバルチャットに使用しています。基本的に、データベースをポーリングして新しいメッセージがあるかどうかを確認し、ある場合はチャットボックスを更新してサイズを変更しています。THatはすべて正常に動作します。

正しく機能していないのは、更新のたびに一番下まで自動スクロールするように設定していることです。ただし、ボックスの上部で過去に物事を見ようとすると、これは煩わしい場合があります。つまり、基本的には、スクロールバーの計算尺が正確に一番下にあるかどうかを確認し、プラグインの一番下の関数を使用してそこに保持できると考えています。ただし、正確に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()しているように、要素のパディング、境界線、およびマージンは考慮されていません。

代わりに、レンダリングされた要素（ドキュメントの上部からの距離）offset().topを検索し、選択した要素の境界線、パディング、および（この関数のパラメーターが）マージンに設定します。topouterHeight()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 に答える