Question

我一直在使用https://docs.oracle.com/cd/B28359_01/appdev.111/b28370/overview.htm#g1461293上的前两个答案，我无法让它发挥作用。

这是我的代码

$(function(){

// Now let's load our messages
function load_messages(){
    $( "#chatscreen" ).append( "<br>Test" );
}

var out = document.getElementById("chatscreen");
var c = 0;
var add = setInterval(function() {
    // allow 1px inaccuracy by adding 1
    var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
    //console.log(out.scrollHeight - out.clientHeight,  out.scrollTop + 1);
    var newElement = document.createElement("div");

    newElement.innerHTML = c++;
    out.appendChild(newElement);

    // scroll to bottom if isScrolledToBotto
    if(isScrolledToBottom) {out.scrollTop = out.scrollHeight - out.clientHeight; }
}, 1000);

setInterval(load_messages,300); // change to 300 to show the latest message you sent after pressing enter // comment this line and it works, uncomment and it fails
                                // leaving it on 1000 shows the second to last message
setInterval(updateScroll,30);
});

load_messages功能的目的是在聊天室中将已发布的新消息每隔300毫秒添加到#chatscreen div。

当load_messages为div添加新消息时，滚动条不会停留在div的底部。

Answer 1

此答案已移至上述问题。 See this answer.

当新内容出现在溢出div的底部时，使用SO的答案保持滚动到底部的问题

1 个答案: