javascript - 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',
                'how do you login' : 'If you are on the "Homepage" you see on the top a "Login" button click on it, ' + 
                                     'sign in with your email and password and you logged in.',
                'how do you register' : '1. Click on "login" on the navbar.' +
                                        '2. On the right side you see a "SIGN UP" button click on the button and you can register.',
                'how to add a internship' : '1. You need a account and you need to be logged in.' + '<br>' +
                                            '2. When you logged in you see above your email on the right side you see "Add internship" ' +
                                            'click on it.' + '<br>' +
                                            '3. Then you see some empty field you need to fill with your company information ' +
                                            '4. You can see how it is on the "Preview design" and if everthing is good click on "Add internship".',
                'edit a internship' : '1. Go to your "internship page". Their you see a edit button if you click on it you can edit ' +
                                      'your internship information.',
                'who are you' : 'I am your DAD! Look behind 😀'
            },
            msg: ''
        }
    },
    head: {
        title: function () {
            return {
                inner: this.title
            }
        }
    },
    methods: {
        talk() {
            var user = this.msg;
            document.getElementById('chatLog').innerHTML += user + '<br>';
            if (user != '') {
                if (user in this.know) {
                    document.getElementById('chatLog').innerHTML += this.know[user] + "<br>" + "<br>";
                } else {
                    document.getElementById('chatLog').innerHTML += 'I don\'t understand...<br>' + '<br>';
                }
            } else {
                alert('Type text in');
            }
            this.msg = '';
            console.log(this.msg);
        }
    }
}

我在this.msg = '';之间使用了scrollheight和console.log(this.msg);请参阅talk() function

<小时/>

我添加了滚动高度，但它不会自动滚动:

这是我粘贴时的功能代码:

talk() {
  var user = this.msg;
  document.getElementById('chatLog').innerHTML += user + '<br>';
  if (user != '') {
     if (user in this.know) {
        document.getElementById('chatLog').innerHTML += this.know[user] + "<br>" + "<br>";
     } else {
        document.getElementById('chatLog').innerHTML += 'I don\'t understand...<br>' + '<br>';
     }
     } else {
       alert('Type text in');
     }
     console.log(this.msg);
     this.msg = '';
     const chatLogDiv = document.getElementById('chatLog')
     chatLogDiv.scrollTop = chatLogDiv.scrollHeight
}

Answer 1

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

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