自动滚动到底部DIV [英] Auto Scroll to Bottom DIV

问题描述

我已经建立了聊天系统，但是在滚动div时出现了一个问题，即默认情况下滚动条必须位于底部.

I have made chat system, but I had a problem with scrolling div for the messages that the scroll bar must be at the bottom as default.

DIV

<div class="chat-body chat-scroll" id="chat-scroll"></div>

样式

.chat-scroll{position: absolute; top:0px; bottom: 0px; overflow-y: auto;}

我使用JQuery从输入表单提交消息以重新加载#chat-scroll的内容 并且自动滚动可以提交，但是在页面第一次加载时，滚动仅停留在div#chat-scroll的中间.与我提交邮件不同的是，发送邮件时邮件会显示在底部.

I use JQuery for submit message from the input form to reload the content of the #chat-scroll and the auto scrolling is okay for submit, but when at first load of the page, the scroll only stays at the middle of the div #chat-scroll. Unlike if I submit a message it will go to the bottom when I send message.

滚动查询

$('#chat-scroll').animate({
scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);                   

推荐答案

加载窗口时，使用document.ready

演示

$(document).ready(function() {
    $('#chat-scroll').animate({
        scrollTop: $('#chat-scroll').get(0).scrollHeight
    }, 2000);
});

这篇关于自动滚动到底部DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！