javascript - 插入 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);
  }
}