问题描述
现在，我想创建一个假的“聊天”功能。 现在的问题是，当我一遍又一遍地单击“发送”时，文本会退出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>
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>
2楼
您需要overflow:auto这将不允许p标签溢出容器。
#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow: auto;
}
3楼
设置overflow: auto;
在#chatbox的CSS上，因此当文本超出div的内容时，滚动条将出现在#chatbox 。
。
overflow: auto;
将自动检测X和Y溢出。
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>
4楼
这是制作滚动条的方法： overflow-y: scroll;
- 见下文。
我无法多次点击发送来复制所描述的行为-您能否详细说明？
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-y: scroll; }
<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>
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 */ }