用css实现聊天窗新消息自动滚动置底效果

111158.gif

gif可能不会动,直接看代码

<style>
    .chat-window {
        width: 300px;
        height: 300px;
        overflow-y: scroll;
        border: 1px solid black;
        background-color: lightskyblue;
        padding-top: 20px;
/*         transform: rotate(180deg); */
/*         2种,要么都旋转180,要么用flex反向,最好是flex(rotate会导致滚动条也反向) */
        display: flex;
        flex-direction: column-reverse;
/*         end */
    }
    .chat-window::-webkit-scrollbar {
        display: none;
    }
    .message {
        background: white;
        margin: 0 10px 10px;
        border: 1px solid black;
        border-radius: 10px;
        padding: 5px;
/*         transform: rotate(180deg); */
    }
    .padding{
        flex: 1;
    }

</style>
<div class="chat-window">
    <div class="padding"></div> 
<!--     padding元素消息解决不满一屏时,会靠下排放问题 -->
    <div class="message">Message 4</div>
    <div class="message">Message 3</div>
    <div class="message">Message 2</div>
    <div class="message">Message 1</div>
</div>
<input type="text" placeholder="输入消息" onkeydown="if(event.keyCode==13){addMessage()}">
<script>
    const chatWindow = document.querySelector('.chat-window');
    function addMessage(){
        const newMessage = document.createElement('div');
        newMessage.classList.add('message', 'new-message');
        newMessage.textContent = document.querySelector('input').value;
        const padding = document.querySelector('.padding');
        chatWindow.insertBefore(newMessage, padding.nextSibling); //插入到padding元素之后; padding始终是第一个元素,其他新插入的倒序;(在vue/react中控制新插入到数组前部即可)
        chatWindow.scrollTop = 0; // 让上滚动后再新插入消息也能回到底部;
        document.querySelector('input').value = '';
    }
</script>