ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: scroll to top as default

Browse Source 
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:
roschaefer 2019-09-29 13:15:00 +02:00
parent e1751347fc
commit b9c0749334
2 changed files with 7 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/app/router.scrollBehavior.js Normal file
View File

@ -0,0 +1,7 @@
export default function(to, from, savedPosition) {
let position = { x: 0, y: 0 }
if (savedPosition) {
position = savedPosition
}
return position
}

74
webapp/nuxt.config.js
View File

@ -124,80 +124,6 @@ export default {
middleware: ['authenticated', 'termsAndConditions'],
linkActiveClass: 'router-link-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)
})
})
},
},
/*