divを挿入しているときにスクロール位置を保持します（ユーザーがスクロールしたときのみ）

Question

ログメッセージの表示に使用するコンテナdivがあります。それが生成されるとき、私はそれぞれのメッセージを独立した子としてdiv要素の前に追加します。 divはoverlay-y:autoに設定され、メッセージ要素が親コンテナの高さを超えた後にスクロールします。私が作成しようとしている動作は、メッセージがスクロールしない/スクロールしないメッセージの「履歴」をスクロールして親の可視領域から移動する場合を除いて、メッセージが通常どおりスクロールすることです。divメッセージリストの先頭に追加されます。

私の現在の試みは、次のようになります。

HTML：

<div id='log'> 
    <h4>Log</h4> 
    <div id='log-rows'></div> 
</div> 

JS：

log: function(text) { 
    var messageHTML = "<div><span class='timestamp'>" + (new Date()).toISOString() + "</span> - <span class='message'>" + text + "</span></div>"; 

    this.$el.find("#log-rows").prepend(messageHTML); 

    var firstLogMessage = $('#log-rows').children().first(); 

    $('#log-rows').children().each(function(index, row) { 
    row.scrollTop += firstLogMessage.height(); 
    }); 

    ... 
} 

CSS：

#log-rows { 
    max-height: 250px; 
    overflow-y: auto; 
} 

Answer 1

log機能を編集します。これは私のために働きます：

function log(text) { 
    var messageHTML = "<div><span class='timestamp'>" + (new Date()).toISOString() + "</span> - <span class='message'>" + text + "</span></div>"; 

    $("#log").find("#log-rows").prepend(messageHTML); 

    var scrollTop = $("#log-rows").scrollTop(); 

    if (scrollTop > 0) { 
    var childHeight = $("#log-rows div").outerHeight(true); // get's the new element's full height including margin 
    var scrollDelta = scrollTop + childHeight; 
    $("#log-rows").scrollTop(scrollDelta); 
    } 
}