我有一个div,当您单击它时,它假设输出另一个可滚动的div,然后滚动到该div的底部。现在,它正在输出可滚动的div,但没有滚动到它的底部。我究竟做错了什么?

 test1.php

#output {
    border: 1px solid black;
    width: 100%;
}

<div id = "output" onclick = "scrollToBottom()"> Click me </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
    function scrollToBottom() {
        $.ajax({
            type: "POST",
            url: "test2.php",
            error: function(xhr,status,error){alert(error);},
            success:function(data) {
                document.getElementById("output").innerHTML = data;
            } //end of success:function(data)
        }); //end of $.ajax

        var objDiv = document.getElementById("messageBox");
        objDiv.scrollTop = objDiv.scrollHeight;

    } //end of scrollToBottom()
</script>


 test2.php

<?php
    echo "
    <style>
        #messageBox {
            border: 3px solid green;
            overflow-y: scroll;
            height: 400px;
            padding: 1%;
        }
    </style>

    <div id = 'messageBox'>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
        <br><br><br><br><br><br>
    </div>
"
?>

最佳答案

如果我理解正确,则要滚动到单击创建的div的底部。如果是这样,这个问题很可能是

var objDiv = document.getElementById("messageBox");
objDiv.scrollTop = objDiv.scrollHeight;


在成功功能之前触发。因此,请尝试:

success:function(data) {
    document.getElementById("output").innerHTML = data;
    var objDiv = document.getElementById("messageBox");
    objDiv.scrollTop = objDiv.scrollHeight;
} //end of success:function(data)e

09-30 16:28
查看更多