высота: 100% фольга во флексбоксе "придерживайтесь полосы прокрутки, если не перемещены"

Question

У меня есть терминал, похожий на терминал.Я хотел бы, чтобы новый вывод заставлял его прокручивать окно, чтобы оно было на виду, , если пользователь вручную не переместил полосу прокрутки для просмотра другой позиции.В этом случае я бы хотел оставить его, просматривая положение, в котором они находились.

Я бы предпочел не делать этого с перехватами JavaScript или обратными вызовами таймера, если это вообще возможно.Поэтому меня заинтересовало многообещающее решение только для CSS использования display: flex с flex-direction: column-reverse;.(Комментарий к этому решению объясняет, что вы можете избежать хлопот с обращением элементов, используя внешний контейнер с атрибутом.)

Заимствование фрагмента из другого ответа, вот демонстрация того, чтоТехника работает - в моем браузере - , но только для 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

Я не мог заставить это работать, используя метод, который я описал в вопросе.Посмотрите ответ @ kukkuz, что «вы не можете сделать это ... во flexbox », что фиксированный размер является в основном требованием для его работы.Не только это, но даже сохраняя фиксированный размер, я обнаружил, что базовый пример, похоже, теряет способность придерживаться дна, если вы слегка отклоняетесь от кода в фрагменте, который я цитирую.

То, что я обнаружил, сделал работа заключалась в том, чтобы перевернуть его вверх дном (текст вверх ногами, все), а затем перевернуть обратно во внешний контейнер.Метод был предложен этим ответом:

https://stackoverflow.com/a/34345634

Это преобразование заставляет браузер думать, что нижняя часть прокрутки фактически является верхней.Закрепить наверху проще, чем закрепить на дне (поскольку его можно смоделировать как постоянное значение 0, а не как постоянно растущее число).

Довольно странно, но, похоже,работать в браузерах, которые я пробовал!

Answer 2

Для flexbox вы должны указать его размер вдоль flex-axis (height в данном случае, так как это столбец flexbox) - по крайней мере, он должен наследовать внутренняя ширина - см. демонстрацию ниже, где это работает, когда родительский элемент #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>