Question

我有以下代码，它是我使用Firebase API进行的聊天显示。问题是，当页面加载时，我希望它直接在底部设置滚动条。此刻，它有点缓慢地向下滑动（因为.animate）。当我重新加载页面时，即使将新内容添加到聊天中，如何让滚动条始终保持在底部？

$(document).ready(function () {    
    var myDataRef = new Firebase('https://ot7fwnsj7h7.firebaseio-demo.com/');
    myDataRef.on('child_added', function (snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
    });

    function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#displayChat'));
        // make text scroll everytime someone posts
        $('#displayChat').animate({
            scrollTop: $("#displayChat")[0].scrollHeight
        }, 'slow');
    };
});

这是我的小提琴：

http://jsfiddle.net/qxkr35pj/

我希望我已经清楚了！谢谢。

Answer 1

这行代码将元素滚动到底部。每次更新视图时都要调用它。

JSFiddle

$("#displayChat")[0].scrollTop =  $("#displayChat")[0].scrollHeight

Answer 2

我认为你想要的是这个而不是你的动画代码：

$('#displayChat').scrollTop($("#displayChat").height());

您还希望每次添加消息时都使用该消息 - 它会将滚动条带到div的底部。

在页面加载时滚动到底部

2 个答案: