vue-router-better-scroller


Enhanced scroll behavior for Vue Router v4.

Motivation

Vue Router currently only preserves the scrolling state on the window object. Sometimes, in your apps you might have a different scrollable element (e.g. body, #app) or even multiple ones. To gain a better user experience, we typically want to preserve the scroll state of them when going back and forth.

This plugin is introduced to experiment with a better way to handle such cases. With a lot of help from @posva 🙏.

Install

``bash
npm i vue-router-better-scroller
`

In your main entry:

`ts
import { createRouter } from 'vue-router'
import { createRouterScroller } from 'vue-router-better-scroller'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes
})

app.use(router)
app.use(createRouterScroller({
selectors: {
'window': true,
'body': true,
'.scrollable': true
},
}))

app.mount('#app')
``

Options

// TODO

Sponsors

License

MIT License © 2022 Anthony Fu