如何在没有滚动的情况下使附加div文本可见？

Question

抱歉质量低劣的问题......

我正在研究聊天机器人项目，搜索了很多并编码了很多。除了在输入标签下面添加html div之外的所有工作..每次向上滚动以查看最后一条消息。我需要的是最后一条消息保持可见。请参阅图片了解更多详情

好的......这是我的代码..

<div class="chat-flow">
    <div class="cloudchatreverse">
        <div>
            <blockquote class="blockquote-reverse">
                <p class="text-right">How do you do ?</p>
            </blockquote>
        </div>
    </div>
    <div class="cloudchat">
        <div>
            <blockquote class="blockquote">
                <p>Hey I'm fine thanks... Can you able to login with twitter</p>
            </blockquote>
        </div>
    </div>
</div>
<input type="text" id="post_message" name="message" placeholder="What's up" autofocus required>

和风格

.chat-flow {    /* scroll bar */
        overflow: scroll;
        height: 200px;
    }

如果您需要任何我可以正确的方式......

更新

这适用于从客户端提交和追加

$(function(){
    document.onkeydown=function(evt){
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if(keyCode == 13)
        {
            var post_message = document.getElementById("post_message").value;
            $(".cloudchat").append('<div class="cloud"><blockquote class="blockquote-reverse">'+ post_message +'</blockquote></div>');
            var request = {};
            request.post_message = post_message;
            //your function call here
                $.ajax({
                    type: "POST",
                    url: "{% url 'post_message' %}",
                    data: JSON.stringify(request),
                    contentType: 'application/json;charset=UTF-8',
                    success: function(result){
                        document.getElementById('post_message').value='';
                        console.log(result);
                    }
                })
        }
    }
})

Answer 1

试试这个滚动到底部

    $(document).keydown(function (evt) {

        if (evt.which == 13) {
            var post_message = $("#post_message").val();
            $(".cloudchat").append('<div class="cloud"><blockquote class="blockquote-reverse">' + post_message + '</blockquote></div>');
            
            var scroll=$('.cloudchat').height();
            $('.chat-flow').animate({
                scrollTop:scroll
            },200)
        }
    })

.chat-flow {
    /* scroll bar */
    overflow: scroll;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="chat-flow">
    <div class="cloudchatreverse">
        <div>
            <blockquote class="blockquote-reverse">
                <p class="text-right">How do you do ?</p>
            </blockquote>
        </div>
    </div>
    <div class="cloudchat">
        <div>
            <blockquote class="blockquote">
                <p>Hey I'm fine thanks... Can you able to login with twitter</p>
            </blockquote>
        </div>
    </div>
</div>
<input type="text" id="post_message" name="message" placeholder="What's up" autofocus required>