[英]jQuery scrollTop not scrolling to last-child
I am creating a chat system. 我正在创建一个聊天系统。 What I would like to have happen is when the div begins overflow, force it to stay on the last 我想要发生的是当div开始溢出时,强迫它留在最后
element. 元件。 I have tried several suggestions from other questions on here, and still cannot get it to work. 我已经在这里尝试了其他问题的一些建议,但仍然无法使其发挥作用。 Within the #chat-area i am using ajax to display a chat.txt file. 在#chat-area中我使用ajax来显示chat.txt文件。 When you type text into the #sendie textarea and press enter, it appends the chat.txt file with the text you entered. 当您在#sendie textarea中键入文本并按Enter键时,它会将chat.txt文件附加到您输入的文本中。 Each entry into the chat.txt tthen has a <p>
tag automatically added to it. 每个进入chat.txt的条目都会自动添加一个<p>
标签。 So I need it to just stay on the last <p>
所以我需要它留在最后<p>
Here is where I'm at currently: 这是我目前所处的位置:
HTML: 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: JS:
$(document).ready(function() {
$('#chatWrap').animate({
scrollTop: $('#chat-area p:last-child').position().top
}, 1000);
});
CSS: 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;
}
EDIT: 编辑:
The following is the output: 以下是输出:
<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>
The following is the AJAX: 以下是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();
},
});
}
process.php: process.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);
?>
Script in 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));
}
}
});
});
Edit AGAIN: 再次编辑:
So I have discovered where the error is. 所以我发现了错误的位置。
// kick off chat
var chat = new Chat();
ERROR: Chat is not defined
$(function() {
Try with this function: 试试这个功能:
$('#chatWrap').animate({
scrollTop: $('#chat-area').height()
}, 1000);
})
Check this demo based on the fiddle of @Leo http://jsfiddle.net/qB3m7/4/ 基于@Leo http://jsfiddle.net/qB3m7/4/的小提琴检查此演示
You could try change your updateChat() function, on sucess to be like this: 您可以尝试更改您的updateChat()函数,在成功时如下:
success: function(data){
if(data.text){
for (var i = 0; i < data.text.length; i++) {
$('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
}
$('#chatWrap').animate({
scrollTop: $('#chat-area').height()
}, 1000);
})
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
},
What does this line do? 这条线做什么? document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
I guess you won't need it. 我想你不需要它。 Comment it before try this update. 在尝试此更新之前评论它。
@Leo我已经更新了包含ajax和process.php代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.