1

是否有任何简单的方法可以在 php/html 聊天框中创建自动滚动？我尝试了一些东西，但它们都干扰了页面上的其他 .js 元素，最终都无法正常工作。

查看聊天框的实时代码点击这里！

这就是我现在所拥有的

// jQuery Document
 $(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){   
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});              
    $("#usermsg").attr("value", "");
    return false;
});

//Load the file containing the chat log
function loadLog(){     
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
    $.ajax({
        url: "log.html",
        cache: false,
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the #chatbox div               
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }               
        },
    });
}
setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

//If user wants to end session
$("#exit").click(function(){
    var exit = confirm("Are you sure you want to end the session?");
    if(exit==true){window.location = 'index.php?logout=true';}

});

});

4

1 回答 1

1

我怀疑你得到的滚动高度的重量不起作用。我试图在 FF 的命令行中输入它，但没有得到 int 或对象。

不要试图获得滚动高度。进一步向下滚动......而且不止于此。

$("#chatbox").animate({ scrollTop: 99999 }, 'normal');

我只尝试过 FF，但应该适用于大多数浏览器。

然后，您的成功功能非常简单：

success: function(html){        $("#chatbox").animate({ scrollTop: 99999 }, 'normal');

            $("#chatbox").html(html);
            $("#chatbox").animate({ scrollTop: 99999 }, 'normal');
}

$(".msgln").last().offset().top

于 2012-09-18T13:27:09.987 回答