即使刷新后，也可以锁定div底部的滚动条以进行聊天

Question

嘿，我的网站上有一个聊天框，我需要始终在底部锁定滚动条，以便新消息始终在用户面前....我试过像

  <div id="mainchatdiv" 
 style="overflow-y:scroll; width:100%;height:247px;background-color:#FAF4ED;">

...........messagea are here...


   </div>

<script>
    var auto_refresh = setInterval(
        function () {
            $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
        }, 5000);
    $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
</script>

代码正在运行，但每当它刷新时，滚动器再次上升....

Answer 1

<script>
var auto_refresh = setInterval(
    function () {
        $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
    }, 5000);
 var chatDiv = document.getElementById("mainchatdiv");
 chatDiv.scrollTop = chatDiv.scrollHeight;
</script>

Answer 2

这个1怎么样： -

var auto_refresh = setInterval(
        function () {
            $('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
            $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
        }, 5000);
    $("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);