3

私はこの複雑な HTML レイアウトを持っています:

http://jsfiddle.net/5RgjL/2/

ご覧のとおり、メッセージは#messagesコンテナーの上部に固定されています。

それらが下部に固定されるようにしたいので、表示される最初のメッセージは上部ではなく下部になります。

また、ページのサイズを変更するときは、スクロール ボックス内のビューを下から上にスライドさせる必要があります。説明が難しいので、例を挙げて説明します。

スクロールバーが表示されるまで、ボックス内にメッセージを入力します。ウィンドウ全体を下からリサイズしてみると、下のメッセージが隠れてしまうことがわかります。私はこれを望んでいませんが、代わりに下から上にスライドさせます。

コンテナを絶対配置するなど、多くのことを試しました#messageが、他の問題に遭遇し、思い通りに動作させることができません。

HTML/CSS の経験が豊富な人の助けが必要です。

Facebook のメッセージ ページに精通している場合は、私が何をしようとしているのか理解できるでしょう。

PS: 一部の CSS スタイルは JavaScript で適用されます。これは、ページ コンテンツを動的に生成し、このページでのみこれらのスタイルが必要になるためです。

4

2 に答える 2

0

私が正しく理解していれば、垂直スペースよりも多くのメッセージが表示されるまでメッセージの絶対下部位置を設定すると、下部に表示される新しいメッセージの最初の要件が解決されます。

これには、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これは、enscrolljQuery プラグインが機能するために必要です (そして、あらゆる種類のスクロールを疑っています)。

しかし、単純にリファクタリングして、すべてのコードを共通の関数に移動することができます。次に例を示します。

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 変換を使用したより良い解決策があるかもしれません。

于 2013-05-14T08:34:53.997 に答える
0

このスタイルをメッセージ ID に適用することで、それらを下部に追加できます。

position: absolute;
bottom: 0;

また、画像をリストの一番下ではなく一番上に追加したい場合は、appendTo() の代わりに prependTo() を使用できます。

スクロールで正確に何を求めているのかわからないので、もう少し情報を提供していただければ、回答を更新します。

于 2013-05-13T14:08:05.103 に答える