Question

我有一个类似终端的contentEditable div。我希望新的输出使它滚动窗口以便显示在窗口中，除非用户手动将滚动条移动到另一个位置，否则。在这种情况下，我希望让它查看他们所处的位置。

如果可能的话，我宁愿避免使用JavaScript钩子或计时器回调来执行此操作。因此，我对将display: flex与flex-direction: column-reverse;结合使用的情况a promising CSS-only solution感兴趣。（对该解决方案的评论说明，可以通过使用带有属性的外部容器来避免元素反转的麻烦。）

借用其中一个答案中的一个片段，这是该技术在我的浏览器中有效的演示，但仅适用于固定大小的div 。

const inner = document.getElementById("inner")
let c = 0

setInterval(function() {
    const newElement = document.createElement("div")
    newElement.textContent = "Line #" + (++c)
    inner.appendChild(newElement)
}, 500)

#outer { /* contents of this div are reversed */
    height: 100px;
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
}
#inner { /* this div has content in normal order */
}

<div id="outer"><div id="inner"></div></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.</p>

但是将其更改为100％会破坏它。与height: auto相同。我有什么魔法可以保持行为并使用100％的身高？

const inner = document.getElementById("inner")
let c = 0

setInterval(function() {
    const newElement = document.createElement("div")
    newElement.textContent = "Line #" + (++c)
    inner.appendChild(newElement)
}, 500)

#outer { /* contents of this div are reversed */
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
}
#inner { /* this div has content in normal order */
}

<div id="outer"><div id="inner"></div></div>
<p>Having changed it to 100%, new content never gets scrolled into view, even if the scroll bar was "stuck" to the bottom</p>

Answer 1

对于flexbox，您必须指定其沿 flex-axis 的尺寸（在这种情况下，height是 column flexbox） -至少必须继承一个 intrinsic 宽度-参见下面的演示，当父元素#wrap具有指定的高度时，它将在以下位置工作：

const inner = document.getElementById("inner")
let c = 0

setInterval(function() {
  const newElement = document.createElement("div")
  newElement.textContent = "Line #" + (++c)
  inner.appendChild(newElement)
}, 500)

function format() {
  return Array.prototype.slice.call(arguments).join(' ')
}

#wrap {
  height: 100px;
}
#outer {
  /* contents of this div are reversed */
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
}

#inner {
  /* this div has content in normal order */
}

<div id="wrap">
  <div id="outer">
    <div id="inner"></div>
  </div>
  <p>Having changed it to 100%, new content never gets scrolled into view, even if the scroll bar was "stuck" to the bottom</p>
</div>

Answer 2

我无法使用我在问题中描述的方法来解决这个问题。请参阅@kukkuz的答案，“您不能在Flexbox中完成该操作... ”，固定大小基本上是其正常工作的要求。不仅如此，即使保持固定大小，我也发现，如果您稍微偏离我引用的代码段中的代码，基本示例似乎会失去其坚持到底的能力。

我发现 did 的工作是将其上下翻转（文本上下翻转，所有内容），然后将其翻转回外部容器中。该方法由以下答案建议：

https://stackoverflow.com/a/34345634

此转换使浏览器认为滚动底部实际上是顶部。固定到顶部比固定到底部更容易（因为可以将其建模为常数0，而不是不断增长的数字）。

很奇怪，但是它似乎可以在我尝试过的浏览器中使用！

高度：100％贴箔的弹性盒“除非移动，否则将滚动条粘贴到底部”

2 个答案: