高度:100％贴膜弹性盒，“除非将滚动条移动到底部，否则将滚动条粘到底部". [英] height: 100% foils flexbox "stick scrollbar to bottom unless moved"
问题描述
我有一个类似终端的contentEditable div.我希望新的输出使它滚动窗口以便显示在窗口中，除非用户手动将滚动条移动到另一个位置，否则 .在那种情况下，我希望让它查看他们所处的位置.
I have a terminal-like contentEditable div. I'd like new output to cause it to scroll the window so it is in view, unless the user has manually moved the scroll bar to be viewing another position. In that case, I wish to leave it viewing the position they were at.
如果可能的话，我宁愿避免使用JavaScript钩子或计时器回调来执行此操作.因此，我对一个有前途的纯CSS解决方案(将display: flex与flex-direction: column-reverse;结合使用)感兴趣. (对该解决方案的评论说明，可以通过使用带有属性的外部容器来避免元素反转的麻烦.)
I'd prefer to avoid doing this with JavaScript hooks or timer callbacks if at all possible. So I was interested in a promising CSS-only solution of using display: flex with flex-direction: column-reverse;. (A comment on that solution explains that you can avoid the hassle of the reversal of elements by using an outer container with the attribute.)
借用其中一个答案中的一个片段，这是该技术可以在我的浏览器中使用的演示，但仅适用于固定大小的div .
Borrowing a snippet from another one of those answers, here is a demonstration that this technique works--in my browser--but only for a fixed-size 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％的身高?
But changing that to 100% instead breaks it. Same for height: auto. Is there any magic I can apply to keep the behavior and use 100% height?
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>
推荐答案
我无法使用我在问题中描述的方法来使其正常工作.请参阅@kukkuz的答案，您不能在flexbox中做到这一点... "，固定大小基本上是其正常工作的要求.不仅如此，即使保持固定的大小，我也发现，如果您稍微偏离我引用的代码段中的代码，则基本示例似乎失去了坚持到底的能力.
I couldn't get this to work using the method I describe in the question. See @kukkuz's answer that "you can't do that... in flexbox", that the fixed size is basically a requirement for it to work. Not only that, but even keeping fixed size I found that the basic example seems to lose its ability to stick to the bottom if you deviate slightly from the code in the snippet I quote.
我发现 did 的工作是将其上下翻转(文本上下翻转，所有内容)，然后将其翻转回外部容器中.此答案建议了该方法:
What I found that did work was to flip it upside down (text upside down, everything), then flip it back in an outer container. The method was suggested by this answer:
https://stackoverflow.com/a/34345634
此转换使浏览器认为滚动底部实际上是顶部.固定到顶部比固定到底部更容易(因为可以将其建模为常数0，而不是不断增长的数字).
This transformation makes the browser think the scroll bottom is actually the top. Pinning to the top is easier for it to do than getting pinned to the bottom (since it can be modeled as the constant value 0, as opposed to an ever-growing number).
很奇怪，但是它似乎可以在我尝试过的浏览器中使用！
Pretty weird, but it appears to work in the browsers I've tried!
这篇关于高度:100％贴膜弹性盒，“除非将滚动条移动到底部，否则将滚动条粘到底部".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
