Axios 响应后 scrollTop 不起作用

Question

我在使用 Laravel（使用 Vue.js、Pusher、Echo）建立实时聊天时遇到问题。这里我有3种方法：

created() {
    this.fetchMessages();
    this.group = $('#group').data('group');
    Echo.private('chat.' + this.group)
        .listen('MessageSent', (e) => {
            this.messages.push({
                text: e.message.text,
                user: e.user,
                author: e.user.name,
                avatar: e.message.avatar
            });
        });
},

methods: {
    fetchMessages() {
        axios.get('/chat/check/' + this.group).then(response => {
            this.messages = response.data;

        });
    },

    addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
        });

    }
}`

使用这些方法后，我需要将 <div id="chat"> 滚动到底部。我尝试了很多选项，例如： document.getElementById('chat').scrollTop=9999

同样使用 jQuery $('#chat')...,

一些插件如 vue-scroll-chat 和 jQuery 相同，但其中 none 有效。此命令在方法 fetchMessages 和 addMessage 中不起作用和...

addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
            document.getElementById('chat').scrollTop=9999;
        });
    }

不起作用。我该如何解决？

Answer 1

我认为您需要将 document.getElementById('chat').scrollTop=9999; 添加到 Vue.$nextTick 以便信息有时间出现并在启动滚动效果之前影响元素。

您可能还想添加一个 ref="chat" 到您的聊天元素，以便您可以通过 vue 引用引用 scrollTop；它看起来像这样

addMessage(message) {
    axios.post('/chat/add', message).then(response => {
        this.messages.push(response.data)
        this.$nextTick(
            () => {
                this.$refs.chat.scrollTop=9999;
            }
        )
    })
}

Axios 响应后 scrollTop 不起作用

scrollTop does not work after Axios response

javascript

jquery

laravel

vue.js

axios