Nuxt/examples/custom-scroll-behavior/nuxt.config.js

49 lines
1.3 KiB
JavaScript

const scrollBehavior = function (to, from, savedPosition) {
// if the returned position is falsy or an empty object,
// will retain current scroll position.
let position = false
// if no children detected
if (to.matched.length < 2) {
// scroll to the top of the page
position = { x: 0, y: 0 }
} else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
// if one of the children has scrollToTop option set to true
position = { x: 0, y: 0 }
}
// savedPosition is only available for popstate navigations (back button)
if (savedPosition) {
position = savedPosition
}
return new Promise(resolve => {
// wait for the out transition to complete (if necessary)
this.app.$root.$once('triggerScroll', () => {
// coords will be used if no selector is provided,
// or if the selector didn't match any element.
if (to.hash && document.querySelector(to.hash)) {
// scroll to anchor by returning the selector
position = { selector: to.hash }
}
resolve(position)
})
})
}
module.exports = {
build: {
vendor: ['axios']
},
css: ['~/assets/main.css'],
transition: {
beforeEnter() {
this.$root.$emit('triggerScroll')
}
},
router: {
scrollBehavior
}
}