聊天框滚动至底部失效：滚动到页面底部而非聊天区底部的解决方法

问题场景 #

实现聊天框时，执行滚动代码后，滚动条会滚动到页面底部，而非聊天框底部，需要修正为滚动到聊天框底部。

现有代码 #

HTML代码 #

<div class="card-body msg_card_body card-footer" >
    <template v-for='(data,data_id) in active_chat_datas ' class='card-footer' id='scrollable' >
        <div class="d-flex justify-content-start mb-4 last-footer" v-if="data['to_facebook_id'] == null">
            <div class="img_cont_msg">
                <img :src="active_customer['facebook_messages_link']" class="rounded-circle user_img_msg" />
            </div>
            <div class="msg_cotainer">
                @{{data['message']}}
                <span class="msg_time" style='width:250px;'>@{{date_format(data['created_at'])}}</span>
            </div>
        </div>
        <div v-else class="d-flex justify-content-end mb-4 last-footer">
            <div class="msg_cotainer_send">
                @{{data['message']}}
                <span class="msg_time_send" style='width:100px;'>@{{date_format(data['created_at'])}}</span>
            </div>
            <div class="img_cont_msg">
                <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg" />
            </div>
        </div>
    </template>
    <div class="d-flex justify-content-end mb-4" id='myid'>
        <div class="msg_cotainer_send ">
            <span class="msg_time_send" style='width:100px;'></span>
        </div>
    </div>
</div>

JS代码 #

$('#myid').stop().animate ({
    scrollTop: $('#myid')[0].scrollHeight
});

问题原因 #

当前代码操作的#myid只是聊天框内的一个子元素，并非带滚动条的容器。带滚动条的实际是最外层的.msg_card_body容器，错误将滚动目标指向内部子元素，导致浏览器把整个页面作为滚动容器，最终滚动到页面底部。

解决步骤 #

1. 确保聊天容器启用滚动样式
   给.msg_card_body设置固定高度和滚动属性，让它成为可滚动容器：

.msg_card_body {
    height: 400px; /* 根据需求调整高度 */
    overflow-y: auto;
}

2. 修改滚动代码，指向正确容器
   由于使用Vue，需等待DOM更新完成后执行滚动，避免数据渲染未完成导致滚动失效：

// Vue2 写法
this.$nextTick(() => {
    const chatContainer = document.querySelector('.msg_card_body');
    $(chatContainer).stop().animate({
        scrollTop: chatContainer.scrollHeight
    });
});

// Vue3/原生JS 写法（无jQuery时）
import { nextTick } from 'vue'; // Vue3需引入
nextTick(() => {
    const chatContainer = document.querySelector('.msg_card_body');
    chatContainer.scrollTop = chatContainer.scrollHeight;
    // 需动画效果则保留jQuery写法
    // $(chatContainer).stop().animate({scrollTop: chatContainer.scrollHeight});
});

注：代码中#scrollable加在Vue的<template>上，而<template>不会被渲染为真实DOM，该ID无实际作用，可忽略。

内容的提问来源于stack exchange，提问作者softya