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&nbsp;chatLogDiv&nbsp;=&nbsp;document.getElementById('chatLog') chatLogDiv.scrollTop&nbsp;=&nbsp;chatLogDiv.scrollHeight