使滑动文本在到达 div 底部时消失

Question

我有一个 ID="text" 的 div，我正在向其中添加文本：

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 隐藏 "overflowing" 节点，如下所示：（演示正在创建 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>

使滑动文本在到达 div 底部时消失

Make sliding text disappear as it reaches bottom of div

html

javascript

css

detection

collision