Javascript 在插入div时保留滚动位置，但仅当用户已滚动时

我有一个容器

div

，用于显示日志消息。在生成每个消息时，我将其作为单独的子元素

div

预先添加。父级

div

设置为

overlay-y:auto

，以便消息元素超过父级容器的高度后，它会滚动。我试图产生的行为是，消息按正常方式滚动，但如果用户向下滚动消息的“历史记录”，则在消息列表顶部添加新消息时，它们不会滚动/移出父

div

的可见区域

我当前的尝试如下所示：

html:

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

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();
  });

  ...
}

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

---

编辑您的

日志

功能。这对我很有用：

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);
  }
}

功能日志（文本）{
var messageHTML=“”+（新日期（））.toISOString（）+“-”+text+”；
$（“#log”）.find（“#log rows”）.prepend（messageHTML）；
var scrollTop=$（“#日志行”）.scrollTop（）；
如果（滚动顶部>0）{
var childHeight=$（“#log rows div”）.outerHeight（true）；//获取新元素的完整高度，包括边距
变量scrollDelta=scrollTop+childHeight；
$（“#日志行”）.scrollTop（scrollDelta）；
}
}

编辑您的

日志

功能。这对我很有用：

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);
  }
}

功能日志（文本）{
var messageHTML=“”+（新日期（））.toISOString（）+“-”+text+”；
$（“#log”）.find（“#log rows”）.prepend（messageHTML）；
var scrollTop=$（“#日志行”）.scrollTop（）；
如果（滚动顶部>0）{
var childHeight=$（“#log rows div”）.outerHeight（true）；//获取新元素的完整高度，包括边距
变量scrollDelta=scrollTop+childHeight；
$（“#日志行”）.scrollTop（scrollDelta）；
}
}

用户如何才能“滚动屏幕”？@RacilHilan：好的，我的语言不清楚。基本上，我不希望我滚动到的div在我为家长的孩子们准备新行时移动。用户怎么能“滚动到屏幕外”？@RacilHilan：好的，我的语言不清楚。基本上，我不希望滚动到的div在为父对象的子对象预先添加新行时移动。请注意，

.outerHeight（true）

比

.height

更好，因为它包括填充、边框和可选边距。请参阅：请注意，

.outerHeight（true）

比

.height

更适合使用，因为它包括填充、边框和可选边距。见：