From b9c0749334cc70b43832d82320afa1d5395c3d75 Mon Sep 17 00:00:00 2001 From: roschaefer Date: Sun, 29 Sep 2019 13:15:00 +0200 Subject: [PATCH] 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 :point_up: 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. --- webapp/app/router.scrollBehavior.js | 7 +++ webapp/nuxt.config.js | 74 ----------------------------- 2 files changed, 7 insertions(+), 74 deletions(-) create mode 100644 webapp/app/router.scrollBehavior.js diff --git a/webapp/app/router.scrollBehavior.js b/webapp/app/router.scrollBehavior.js new file mode 100644 index 000000000..041310f9c --- /dev/null +++ b/webapp/app/router.scrollBehavior.js @@ -0,0 +1,7 @@ +export default function(to, from, savedPosition) { + let position = { x: 0, y: 0 } + if (savedPosition) { + position = savedPosition + } + return position +} diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index 5e7726d43..f1747b479 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -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) - }) - }) - }, }, /*