mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
fix: scroll to top as default
So nuxt's default scrollBehavior seems to have some kind of "scroll to
anchor" already built in. Unfortunately we cannot use it, because the
the anchor is not yet in the DOM when the scroll behavior is called.
So the justification for this change is:
1. Remove scrollBehavior from `nuxt.config.js` it's deprecated to put it
there.
2. Also *don't* use the default scrollbehavior because of the reasons
above ☝️
Instead I assume to always scroll to the top. This might be undesired
sometimes but let's keep a watchful eye and define the behavior if
needed.
This commit is contained in:
parent
e1751347fc
commit
b9c0749334
7
webapp/app/router.scrollBehavior.js
Normal file
7
webapp/app/router.scrollBehavior.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default function(to, from, savedPosition) {
|
||||||
|
let position = { x: 0, y: 0 }
|
||||||
|
if (savedPosition) {
|
||||||
|
position = savedPosition
|
||||||
|
}
|
||||||
|
return position
|
||||||
|
}
|
||||||
@ -124,80 +124,6 @@ export default {
|
|||||||
middleware: ['authenticated', 'termsAndConditions'],
|
middleware: ['authenticated', 'termsAndConditions'],
|
||||||
linkActiveClass: 'router-link-active',
|
linkActiveClass: 'router-link-active',
|
||||||
linkExactActiveClass: 'router-link-exact-active',
|
linkExactActiveClass: 'router-link-exact-active',
|
||||||
scrollBehavior: (to, _from, savedPosition) => {
|
|
||||||
let position = false
|
|
||||||
// if no children detected and scrollToTop is not explicitly disabled
|
|
||||||
if (
|
|
||||||
to.matched.length < 2 &&
|
|
||||||
to.matched.every(r => r.components.default.options.scrollToTop !== false)
|
|
||||||
) {
|
|
||||||
// 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)
|
|
||||||
window.$nuxt.$once('triggerScroll', () => {
|
|
||||||
let processInterval = null
|
|
||||||
let processTime = 0
|
|
||||||
const callInterval = 100
|
|
||||||
const callIntervalLimit = 2000
|
|
||||||
|
|
||||||
// coords will be used if no selector is provided,
|
|
||||||
// or if the selector didn't match any element.
|
|
||||||
if (to.hash) {
|
|
||||||
let hash = to.hash
|
|
||||||
// CSS.escape() is not supported with IE and Edge.
|
|
||||||
if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
|
|
||||||
hash = '#' + window.CSS.escape(hash.substr(1))
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
processInterval = setInterval(() => {
|
|
||||||
const hashIsFound = document.querySelector(hash)
|
|
||||||
|
|
||||||
if (hashIsFound) {
|
|
||||||
position = {
|
|
||||||
selector: hash,
|
|
||||||
offset: { x: 0, y: -500 },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
processTime += callInterval
|
|
||||||
if (hashIsFound || processTime >= callIntervalLimit) {
|
|
||||||
clearInterval(processInterval)
|
|
||||||
processInterval = null
|
|
||||||
}
|
|
||||||
}, callInterval)
|
|
||||||
} catch (e) {
|
|
||||||
/* eslint-disable-next-line no-console */
|
|
||||||
console.warn(
|
|
||||||
'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let resolveInterval = setInterval(() => {
|
|
||||||
if (!processInterval) {
|
|
||||||
clearInterval(resolveInterval)
|
|
||||||
resolve(position)
|
|
||||||
}
|
|
||||||
}, callInterval)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user