私が正しく理解していれば、垂直スペースよりも多くのメッセージが表示されるまでメッセージの絶対下部位置を設定すると、下部に表示される新しいメッセージの最初の要件が解決されます。
これには、CSS と JavaScript の変更が必要です。
CSS
#messagesWrapper {
position:absolute;
bottom:0;
}
JavaScript
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
if ($messages.height() >= $messagePageContent.height()){
messagesWrapper .css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
ウィンドウのサイズが変更された場合にもスクロールが発生する必要があるため、サイズ変更イベントにハンドルをアタッチすることも必要です。
$(window).resize(function() {
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});
ただし、CSSをデフォルト値にリセットする高さの計算が欠落しているため、これでは十分ではありません。position
これは、enscroll
jQuery プラグインが機能するために必要です (そして、あらゆる種類のスクロールを疑っています)。
しかし、単純にリファクタリングして、すべてのコードを共通の関数に移動することができます。次に例を示します。
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
scrollMessages();
}
function scrollMessages() {
if ($messages.height() >= $messagePageContent.height()){
$messagesWrapper.css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
$(window).resize(scrollMessages);
これは、このデモで使用したコードです。これはおそらく最善の解決策ではありません。-webkit-transform: scaleY(-1)
コンテナーを反転してからメッセージを反転するために使用することを検討していましたが、スクロールが台無しになりました (つまり、逆方向でした!)。CSS 変換を使用したより良い解決策があるかもしれません。