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>

Answer 2

这是一个使用js的示例。

setInterval(function(){ 
  logTime(); 
}, 1000);

var consoleDiv = document.getElementById('timelog');

function logTime(){
  //check if div is scrolled to the bottom
  var atBottom = isElementScrolledToBottom(consoleDiv);
  
  //add content
  var timeNode = document.createElement("p");
  var timeText = document.createTextNode(Date.now());
  timeNode.appendChild(timeText);
  consoleDiv.appendChild(timeNode);
  
  //if div was at the bottom, scroll to bottom again.
  if(atBottom) {
    scrollToBottom(consoleDiv);
  }
};

//function to check if element is scrolled to the bottom
function isElementScrolledToBottom(el) {
  if (el.scrollTop >= (el.scrollHeight - el.offsetHeight)) {
      return true;
  }
  return false;
}

//function to scroll to bottom
function scrollToBottom(el) {
  el.scrollTop = el.scrollHeight;
}

#timelog {
  height: 200px;
  overflow-y: scroll;
}

<div id="timelog"></div>

添加内容时的“自动滚动” div

2 个答案: