使用vue路由器时如何在特殊元素中进行主动滚动

Question

我有一个list，其中ul li中包含很多数据。但是，当我使用vue路由器时，无法启动滚动条。我已经使用了scrollBehavior，但是无法正常工作。

我总是像This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning;

一样得到警告

我的组件

<template>
<div class="col-lg-12 col-md-12 col-sm-12">
    <div class="inbox-lists">
        <div class="inbox-action">
            <ul>
                <li><label><input type="checkbox" name="select-all" id="select_all"> Select all</label></li>
                <li><a class="delete-email" title=""><i class="fa fa-trash-o"></i> Delete</a></li>
                <li><a title=""><i class="fa fa-refresh"></i> Refresh</a></li>
            </ul>
        </div>
        <div class="mesages-lists">
            <form method="post">
                <input type="text" placeholder="Search Email">
            </form>

            <comp-loadingpanel v-if="getLoadingStatus"></comp-loadingpanel>

            <ul id="message-list" class="message-list ps-container ps-theme-default ps-active-y">
                <li v-for="item in getInboxData" :key="item._id" :id="item._id">
                    <input class="select-message" type="checkbox">
                    <span class="star-this starred"><i class="fa fa-star-o"></i></span>
                    <h3 class="sender-name">{{ item.sender.name }} 
                        <span v-if="item.read_status == 'unread'" class="label green">New</span>
                        <span v-if="item.read_status == 'read'" class="label blue">Read</span>
                    </h3>
                    <span class="make-important"><i class="fa fa-thumb-tack"></i></span>
                    <p>{{ item.message }}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

</template>

<script>
import {mapGetters, mapActions} from "vuex"
export default {
    created() {
        this.fetchInboxData()
    },
    computed: {
        ...mapGetters(["getInboxData", "getLoadingStatus"]),
    },
    methods: {
        ...mapActions(["fetchInboxData"]),
    }
}
</script>

和我的商店

import axios from 'axios';

const state = {
    inboxStore: [],
    errorBag: null,
    loading: true
};

const getters = {
    getInboxData: state => state.inboxStore,
    getLoadingStatus: state => state.loading
};

const actions = {
    async fetchInboxData({ commit }) {
        try {
            let response    = await axios.get('/data/inbox')
            let returnDB    = await response.data;
            commit('SET_INBOX_DATA', returnDB)
        } catch(error) {
            state.errorBag = error
            NProgress.done()
        }
    }
};

const mutations = {
    SET_INBOX_DATA: (state, payload) => {
        state.loading = false
        state.inboxStore = payload
    },
    UPDATE_STAR: (state, payload) => {
        state.inboxStore = payload
    }
};

export default {
    state,
    getters,
    actions,
    mutations
};

我的路由器

import Vue from 'vue'
import VueRouter from 'vue-router'

import NotFound from '../components/NotFoundComponent.vue'
import UpdateStatus from '../components/UpdateStatusComponent.vue'
import Inbox from '../components/InboxComponent.vue'
import Profile from '../components/MyProfileComponent.vue'
import Friends from '../components/FriendsRequestComponent.vue'
import Logout from '../components/LogoutComponent.vue'
import SearchFriends from '../components/SearchUserComponent.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    scrollBehavior: (to, from, savedPosition) => {
        if (to.hash) {
            return {
                selector: to.hash
            }
        }
        if (savedPosition) {
            return savedPosition
        } else {
            return {x: 0, y: 0}
        }
    },
    routes: [
        {
            path: '/',
            name: 'home',
            components: {
                default: UpdateStatus
            },
        },
        {
            path: '/inbox',
            name: 'inbox',
            component: Inbox,
        },
        {
            path: '/profile',
            name: 'profile',
            component: Profile,
        },
        {
            path: '/friends',
            name: 'friends',
            component: Friends,
        },
        {
            path: '/logout',
            name: 'logout',
            component: Logout,
        },
        {
            path: '/search/friends',
            name: 'searchfriends',
            component: SearchFriends,
        },
        { path: '*', component: NotFound}
    ]
})

export default router

如果我在页面之间浏览，我的列表看起来像（无法向下滚动列表）

但是，如果我重新加载页面，则会显示滚动条