html - 添加内容时"Autoscroll"div

Question

我的目标是在网页上显示连续的控制台输出。

保存输出的容器有最大高度。每一个新行都被添加到底部。现在我希望最后一行始终对用户可见(除非他自己滚动，然后滚动条应该不在添加新行时跳回)。

我试着用 CSS 做到这一点，虽然它在 chrome 中工作正常，但在 Firefox 中却不行:

jQuery(document).ready(function($) {
  window.setInterval(function() {
    $('.log').append('<div class="line">Lorem ipsum dolor sit amet</div>');
  }, 100);
});

.window {
  height: 300px;
  background: #fff;
}

.log {
  background-color: #1c1c1c;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  border-radius: 3px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: #DDD;
}

.log-container {
  flex-basis: 100%;
}

.autoscroll {
  flex-basis: auto;
  display: flex;
  flex-direction: column-reverse;
  height: calc(100% - 56px);
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="window">
  <h4>Show Logs</h4>
  <div class="autoscroll">
    <div class="log-container">
      <pre class="log"></pre>
    </div>
  </div>
</div>

( fiddle )

有没有人知道我如何才能让它在所有浏览器上可靠地工作？

编辑:它不是this 的副本问题，因为我想要一个 css 解决方案而不是 javascript 解决方案(如果可能的话)。它几乎可以工作，但是 sadly not yet within firefox .

Answer 1

如果不使用 JavaScript，我不知道有什么方法可以做到这一点，但如果您喜欢该解决方案，我已经使用了一种方法来满足您的需求。

jQuery.fn.scrollTo = function(elem) {
    if( this[0].scrollTop > this[0].scrollHeight - this[0].offsetHeight - $(elem).height() - 10) {
        $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top);
    }
    return this; 
};

jQuery(document).ready(function($) {
  var i = 1;
  window.setInterval(function() {
    var element = $('<div class="line">Lorem ipsum dolor sit amet ' + i + '</div>');
    $('.log').append(element).scrollTo(element);
    i++;
  }, 100);
});

.window {
  height: 300px;
  background: #fff;
}

.log {
  background-color: #1c1c1c;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  border-radius: 3px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: #DDD;
}

.log-container {
  flex-basis: 100%;
}

.autoscroll {
  flex-basis: auto;
  display: flex;
  flex-direction: column-reverse;
  height: calc(100% - 56px);
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="window">
  <h4>Show Logs</h4>
  <div class="autoscroll">
    <div class="log-container">
      <pre class="log"></pre>
    </div>
  </div>
</div>