我使用PHP创建了一个简单的聊天框。我希望这能够加载所有新消息并滚动到chatbox
的底部。我正在使用AJAX重新加载新邮件,但似乎无法将其向下滚动到新邮件显示的底部。
我已尝试使用down.scrollTop = down.scrollHeight;
,但无法使其正常运行。
请帮忙吗?
<div id="tab3">
<h2>Chat Room</h>
<div id="c-input_wrap">
<div id="chatlog">
Loading chat please wait...
</div>
<div id="chatwrap">
<div id="chatinput">
<form name="chatbox" class="userchat">
<input class="userchat" name="message" type="text" autocomplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/><br>
<input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
</form>
</div>
</div>
</div>
</div>
<script>
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
event.preventDefault();
});
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>
的CSS:
#tabs {
overflow: hidden;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0px -15px 0 0;
}
#tabs a {
float: left;
position: relative;
padding: 0 20px;
height: 0;
line-height: 30px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
border-right: 20px solid transparent;
border-bottom: 30px solid #3D3D3D;
opacity: .3;
filter: alpha(opacity=30);
transition: all .5s;
}
#tabs a:hover, #tabs a:focus {
border-bottom-color: rgba(255,0,4,0.60);
opacity: 1;
filter: alpha(opacity=100);
}
#tabs a:focus {
outline: 0;
}
#tabs #current {
z-index: 10;
border-bottom-color: #3d3d3d;
opacity: .8;
filter: alpha(opacity=100);
cursor: default;
}
#content {
background-color: rgba(0,0,0,0.10);
border-top: 3px solid rgba(61,61,61,0.80);
padding: 2em;/*height: 220px;*/
overflow-y: auto;
height: 85%;
}
#content h2, #content h3, #content p {
margin: 0 0 15px 0;
}
#chatlog {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
text-align: left;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
background-color: rgba(255,255,255,0.70);
border-top: solid 2px rgba(235,0,3,0.70);
width: 95%;
height: 88%;
overflow-y: auto;
word-wrap: break-word;
}
#c-input_wrap {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 0;
height: 63%;
}
#chatinput {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 27%;
right: 25%;
width: 70%;
}
#chatwrap {
position: absolute;
height: 40px;
width: 95%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: -10px;
}
input.userchat {
display: inline-block;
float: left;
margin-left: 0;
width: 50%;
padding: 10px;
border: none;
border-bottom: solid 2px #3D3D3D;
transition: border, background-color .75s;
background-color: rgba(255,255,255,0.70);
font-weight: bold;
line-height: 18px;
color: #000000;
}
input:focus.userchat {
background-color: rgba(255,255,255,0.90);
border-bottom: solid 2px rgba(235,0,3,0.69);
outline: 0;
color: rgba(61,61,61,1.00);
font-weight: bold;
}
input[type=button].userchat {
display: block;
margin-top: -23px;
margin-left: 2px;
text-align: center;
padding-left: 2px;
float: left;
width: 40px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: rgba(61,61,61,0.70);
font-size: 16px;
background: rgba(255,255,255,0.70);
border-bottom: solid 2px #3D3D3D;
cursor :pointer;
transition: all .75s;
}
input[type=button].userchat:hover,
input[type=button].userchat:focus {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
font-size: 16px;
border-bottom: solid 2px rgba(235,0,3,0.69);
background: rgba(255,255,255,0.90);
cursor: pointer;
}
chat.php:
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$message = $_REQUEST['message'];
mysqli_query($connect, "INSERT INTO chat (name, message) VALUES ('$userLabel', '$message')");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo $extract['name'] . ": " . $extract['message'];
}
?>
logs.php
<?php
error_reporting(E_ALL & ~E_NOTICE);
session_start();
if (isset($_SESSION['id'])) {
$userId = $_SESSION['id'];
$username = $_SESSION['username'];
$userLabel = $_SESSION['nickname'];
}
$connect = mysqli_connect("", "", "", "webclyde_root");
mysqli_select_db($connect, "webclyde_root");
$result1 = mysqli_query($connect, "SELECT * FROM chat ORDER by id");
while ($extract = mysqli_fetch_assoc($result1)) {
echo "<br>" . $extract['name'] . ": " . $extract['message'];
}
?>
答案 0 :(得分:5)
要使其动画化,您可以使用jQuery .animate()
函数。
使用:
var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 1000);
jsFiddle示例:http://jsfiddle.net/00xsrck8/
或者没有使用动画:
var log = $('#chatlog');
log.animate({ scrollTop: log.prop('scrollHeight')}, 0);
使用提供的css完成此任务。请参阅jsfiddle:http://jsfiddle.net/00g2LnqL/
答案 1 :(得分:2)
使用此:
var c = $('#chatlog');
c.scrollTop(c.prop("scrollHeight"));