我使用 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;
}

聊天.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'];
    }
?>

日志.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'];
    }
?>

最佳答案

要使其具有动画效果，您可以使用 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/

关于javascript - 聊天框滚动到底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33641208/