Заставьте скользящий текст исчезнуть, когда он достигнет нижней части div

Question

У меня есть div с id = "text", к которому я добавляю текст:

var el = document.getElementById('text');
var p1 = document.createElement('p');
p1.appendChild(document.createTextNode('text to be inputted.'));
el.insertBefore(p1, el.childNodes[0] || null);

<div id="text"></div>

После ввода нескольких строк текста, я хочу, чтобы старый текст в нижней части div исчезал.

Могу ли я сделать это, используя максимальное число в массиве el.childNodes []? Или мне придется использовать обнаружение столкновений, когда текст достигает нижней части div? Спасибо !!!

Answer 1

Видение After inputting multiple lines of text очень неоднозначно, и нет никакого способа ответить на него окончательно. Однако, если вы намереваетесь вставить каждую строку в качестве собственного абзаца (или любого другого типа узла DOM), вы можете скрыть «переполненные» узлы, используя CSS, например так: (демонстрация создает 10 элементов, но показывает только 5 )

const el = document.getElementById('text');
for (let i = 0; i < 10; i++) {
  const p1 = document.createElement('p');
  p1.appendChild(document.createTextNode('text to be inputted.'));
  el.insertBefore(p1, el.childNodes[0] || null);
}

#text > p:nth-child(n + 6) {
  display: none;
}

<div id="text"></div>