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

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

1 голос
/ 15 марта 2020

У меня есть 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? Спасибо !!!

1 Ответ

1 голос
/ 15 марта 2020

Видение 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>
...