Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): smooth scroll behavior option (#21948)

Browse Source
This commit is contained in:
Lucas Vargas 2023-07-20 09:54:03 +01:00
parent bea5ec35fb
commit a2552c0191
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/nuxt/src/pages/runtime/router.options.ts
View File

@ -12,6 +12,7 @@ type ScrollPosition = Awaited<ReturnType<RouterScrollBehavior>>
export default <RouterConfig> { export default <RouterConfig> {
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const behavior = this.scrollBehaviorType ?? 'auto'
// By default when the returned position is falsy or an empty object, vue-router will retain the current scroll position // By default when the returned position is falsy or an empty object, vue-router will retain the current scroll position
// savedPosition is only available for popstate navigations (back button) // savedPosition is only available for popstate navigations (back button)
@ -28,7 +29,7 @@ export default <RouterConfig> {
return { left: 0, top: 0 } return { left: 0, top: 0 }
} }
if (to.hash) { if (to.hash) {
return { el: to.hash, top: _getHashElementScrollMarginTop(to.hash) } return { el: to.hash, top: _getHashElementScrollMarginTop(to.hash), behavior }
} }
} }
@ -39,7 +40,7 @@ export default <RouterConfig> {
nuxtApp.hooks.hookOnce(hookToWait, async () => { nuxtApp.hooks.hookOnce(hookToWait, async () => {
await nextTick() await nextTick()
if (to.hash) { if (to.hash) {
position = { el: to.hash, top: _getHashElementScrollMarginTop(to.hash) } position = { el: to.hash, top: _getHashElementScrollMarginTop(to.hash), behavior }
} }
resolve(position) resolve(position)
}) })

3
packages/schema/src/types/router.ts
View File

@ -5,6 +5,7 @@ export type RouterOptions = Partial<Omit<_RouterOptions, 'history' | 'routes'>>
history?: (baseURL?: string) => RouterHistory history?: (baseURL?: string) => RouterHistory
routes?: (_routes: _RouterOptions['routes']) => _RouterOptions['routes'] routes?: (_routes: _RouterOptions['routes']) => _RouterOptions['routes']
hashMode?: boolean hashMode?: boolean
scrollBehaviorType?: 'smooth' | 'auto'
} }
export type RouterConfig = RouterOptions export type RouterConfig = RouterOptions
@ -12,4 +13,4 @@ export type RouterConfig = RouterOptions
/** /**
* Only JSON serializable router options are configurable from nuxt config * Only JSON serializable router options are configurable from nuxt config
*/ */
export type RouterConfigSerializable = Pick<RouterConfig, 'linkActiveClass' | 'linkExactActiveClass' | 'end' | 'sensitive' | 'strict' | 'hashMode'> export type RouterConfigSerializable = Pick<RouterConfig, 'linkActiveClass' | 'linkExactActiveClass' | 'end' | 'sensitive' | 'strict' | 'hashMode' | 'scrollBehaviorType'>