我正在创建一个聊天系统。我希望发生的是当 div 开始溢出时,强制它停留在最后一个
元素上。我在这里尝试了其他问题的一些建议,但仍然无法正常工作。在 #chat-area 中,我使用 ajax 来显示 chat.txt 文件。当您在#sendie 文本区域中键入文本并按回车键时,它会将您输入的文本附加到 chat.txt 文件中。 chat.txt 中的每个条目都有一个 <p>
标签自动添加到它。所以我需要它只停留在最后<p>
这是我目前所在的位置:
HTML:
<div id="chatWrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '200' ></textarea>
</form>
</div>
JS:
$(document).ready(function() {
$('#chatWrap').animate({
scrollTop: $('#chat-area p:last-child').position().top
}, 1000);
});
CSS:
#chatWrap
{
width: 200px;
height: 200px;
box-shadow: 1px 1px 10px #333 inset;
color: white;
font-family: arial;
font-size: 14px;
overflow: auto;
}
#chat-area
{
padding-left: 11px;
}
#chat-area p:nth-child(even)
{
background: #961B10;
margin-left: -8px;
padding-left: 14px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 1px;
margin-bottom: -1px;
}
编辑:
输出如下:
<div id="chatWrap">
<div id="chat-area">
<p>Guest:hi </p>
<p>Guest:hello </p>
<p>Guest:Hey </p>
<p>Guest:Hi </p>
<p>Guest:Hello </p>
<p>Guest:Hey </p>
<p>Guest:Hi </p>
</div>
</div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength="200"></textarea>
</form>
以下是AJAX:
var instanse = false;
var state;
var mes;
var file;
function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}
//gets the state of the chat
function getStateOfChat(){
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {
'function': 'getState',
'file': file
},
dataType: "json",
success: function(data){
state = data.state;
instanse = false;
},
});
}
}
//Updates the chat
function updateChat(){
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {
'function': 'update',
'state': state,
'file': file
},
dataType: "json",
success: function(data){
if(data.text){
for (var i = 0; i < data.text.length; i++) {
$('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
}
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
},
});
}
else {
setTimeout(updateChat, 3000);
}
}
//send the message
function sendChat(message, nickname)
{
updateChat();
$.ajax({
type: "POST",
url: "process.php",
data: {
'function': 'send',
'message': message,
'nickname': nickname,
'file': file
},
dataType: "json",
success: function(data){
updateChat();
},
});
}
进程.php:
<?php
$function = $_POST['function'];
$log = array();
switch($function) {
case('getState'):
if(file_exists('chat.txt')){
$lines = file('chat.txt');
}
$log['state'] = count($lines);
break;
case('update'):
$state = $_POST['state'];
if(file_exists('chat.txt')){
$lines = file('chat.txt');
}
$count = count($lines);
if($state == $count){
$log['state'] = $state;
$log['text'] = false;
}
else{
$text= array();
$log['state'] = $state + count($lines) - $state;
foreach ($lines as $line_num => $line)
{
if($line_num >= $state){
$text[] = $line = str_replace("\n", "", $line);
}
}
$log['text'] = $text;
}
break;
case('send'):
$nickname = htmlentities(strip_tags($_POST['nickname']));
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
$message =($_POST['message']);
if(($message) != "\n"){
if(preg_match($reg_exUrl, $message, $url)) {
$message = preg_replace($reg_exUrl, '<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message);
}
fwrite(fopen('chat.txt', 'a'), "". $nickname . ":" . $message = str_replace("\n", " ", $message) . "\n");
}
break;
}
echo json_encode($log);
?>
header 中的脚本:
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie").keydown(function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
再次编辑:
所以我发现错误在哪里了。
// kick off chat
var chat = new Chat();
ERROR: Chat is not defined
$(function() {
最佳答案
试试这个函数:
$('#chatWrap').animate({
scrollTop: $('#chat-area').height()
}, 1000);
})
根据@Leo http://jsfiddle.net/qB3m7/4/ 的 fiddle 检查这个演示
关于javascript - jQuery scrollTop 不滚动到最后一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20892217/