Vue JS 当我点击按钮时我希望 div 滚动到 div 的底部

Question

嘿，我正在制作一个聊天机器人，但我希望当您按 Enter 或单击按钮时，div 滚动到底部，因为当您与机器人聊天时，您需要每次都向下滚动。我有一个函数，但滚动必须在talk()函数中。这是模板代码<template>    <div class="container">        <div class="container max">            <div class="container con">                <div class="row ml-0 mt-3">                    <p>{{this.know.welkom}}</p>                </div>               <p id="chatLog" class="chatLog font-weight-bold"></p><br>            </div>        </div>        <div class="row mt-4">            <div class="col">                <input id="userBox" class="inputChat" type="text" @keyup.enter="talk()" v-model="msg" required>            </div>            <div type="submit" value="Send" class="btn btn-primary mt-2 ml-2" @click="talk()">Send<img class="sendIcon" src="@/assets/icons/send.png"></div>        </div>    </div></template>这是我的脚本import json from './info.json';export default {    data() {        return {            title: 'Chat bot',            test: this.json,            know: {                'welkom' : '📍Welcome I will help you to answer your questions. If you want more info type "help".📍',                'help' : 'These are the questions that can be answerd: <br>' +                          '1️⃣ how do you login <br>' +                         '2️⃣ how do you register <br>' +                         '3️⃣ how to add a internship <br>' +                         '4️⃣ edit a internship <br>' +                         '5️⃣ who are you',我在 之间使用了滚动高度this.msg = '';并 console.log(this.msg);看到talk() function

Answer 1

要滚动到 #chatLog div 的底部，只需执行以下操作：

const chatLogDiv = document.getElementById('chatLog')
chatLogDiv.scrollTop = chatLogDiv.scrollHeight