971ScrollTo, Vue and Vue-Router
After navigating to a certain page - let's call it Chat
, it want to scroll programmatically to the bottom of the page. In pure JS it would look like this:
window.scrollTo(0,document.body.scrollHeight);
Which words fine - but it does not work after Vue-Router changes. For that to work, the rounter config needs to be changed:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else if (to.name === 'Chat'){
return { x: 0, y: window.innerHeight }
}
return false
}
})
If a savedPosition
exist (in case of back/forward navigation with browser buttons), return that saved position, if the page is called Chat
, then scroll y
to the window.innerHeight
.