我有一个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