Question

现在我想创建一个虚假的“聊天”功能。现在的问题是，当我一遍又一遍地点击“发送”时，文本会转义div。有没有办法使它，当div中的文本接近div边界时，它将停止或制作滚动功能。我只能使用Html Javascript和CSS

	 function postchat(){
		var node =document.createElement("p");
		var content= document.getElementById("comment").value;
		var comment= content;
		var textnode = document.createTextNode(comment);
		node.appendChild(textnode);
		document.getElementById("allComment").appendChild(node);
	}

#chatbox {
width:50%;
    text-align:left;
	background-color:#F7F7F7;
    height:250px;
	border:1px solid black;
}

<body>
<div id="chatbox">					
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 1

设置overflow:auto

function postchat(){
		var node =document.createElement("p");
		var content= document.getElementById("comment").value;
		var comment= content;
		var textnode = document.createTextNode(comment);
		node.appendChild(textnode);
		document.getElementById("allComment").appendChild(node);
	}

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

<body>
<div id="chatbox">					
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

Answer 2

您需要overflow:auto这不允许p标签溢出容器。

#chatbox {
    width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

Answer 3

在overflow: auto;的CSS上设置#chatbox，因此当文字覆盖div的内容时，滚动条会显示在#chatbox上。

More info about overflow here

overflow: auto;会自动检测到X和Y的溢出。

＆＃13;

	 function postchat(){
		var node =document.createElement("p");
		var content= document.getElementById("comment").value;
		var comment= content;
		var textnode = document.createTextNode(comment);
		node.appendChild(textnode);
		document.getElementById("allComment").appendChild(node);
	}

＆＃13;

#chatbox {
width:50%;
    text-align:left;
	background-color:#F7F7F7;
    height:250px;
	border:1px solid black;
    overflow: auto;
}

＆＃13;

<body>
<div id="chatbox">					
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

＆＃13;

Answer 4

以下是制作滚动条的方法：overflow-y: scroll; - 见下文。

我无法在发送的多次点击中复制所描述的行为 - 你能详细说明一下吗？

＆＃13;

	 function postchat(){
		var node =document.createElement("p");
		var content= document.getElementById("comment").value;
		var comment= content;
		var textnode = document.createTextNode(comment);
		node.appendChild(textnode);
		document.getElementById("allComment").appendChild(node);
	}

＆＃13;

#chatbox {
width:50%;
    text-align:left;
	background-color:#F7F7F7;
    height:250px;
	border:1px solid black;
overflow-y: scroll;
}

＆＃13;

<body>
<div id="chatbox">					
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>

＆＃13;

Answer 5

使用overflow:auto或overflow-y:scroll应该适合您。

如有必要，

overflow: auto将向所有方向滚动，而overflow-y: scroll将保持滚动到垂直（y）轴。

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow-y: scroll;
    /*  overflow: auto */
}

聊天室文本转发<div>

5 个答案: