From 62d9c416a9bdef2848035cd8ba15c8347c7c748e Mon Sep 17 00:00:00 2001 From: James Homer Date: Fri, 22 Sep 2017 17:05:02 +0100 Subject: [PATCH 1/6] make scrollBehavior work with transitions by handling a promise --- examples/scroll-behavior/app.js | 15 ++++++++--- examples/scroll-behavior/index.html | 6 +++++ src/util/scroll.js | 42 +++++++++++++++++------------ 3 files changed, 43 insertions(+), 20 deletions(-) diff --git a/examples/scroll-behavior/app.js b/examples/scroll-behavior/app.js index af555e8b5..d2cc5ea5a 100644 --- a/examples/scroll-behavior/app.js +++ b/examples/scroll-behavior/app.js @@ -20,12 +20,13 @@ const Bar = { // - only available in html5 history mode // - defaults to no scroll behavior // - return false to prevent scroll -const scrollBehavior = (to, from, savedPosition) => { +const scrollBehavior = async function (to, from, savedPosition) { if (savedPosition) { // savedPosition is only available for popstate navigations. return savedPosition } else { const position = {} + let delay = 500 // new navigation. // scroll to anchor by returning the selector if (to.hash) { @@ -35,14 +36,20 @@ const scrollBehavior = (to, from, savedPosition) => { if (to.hash === '#anchor2') { position.offset = { y: 100 } } + + if (document.querySelector(to.hash)) { + delay = 0 + } } // check if any matched route config has meta that requires scrolling to top if (to.matched.some(m => m.meta.scrollToTop)) { - // cords will be used if no selector is provided, + // coords will be used if no selector is provided, // or if the selector didn't match any element. position.x = 0 position.y = 0 } + // wait for the out transition to complete (if necessary) + await (new Promise(resolve => setTimeout(resolve, delay))) // if the returned position is falsy or an empty object, // will retain current scroll position. return position @@ -72,7 +79,9 @@ new Vue({
  • /bar#anchor
  • /bar#anchor2
    • - + + + ` }).$mount('#app') diff --git a/examples/scroll-behavior/index.html b/examples/scroll-behavior/index.html index 5bd2be0c4..dd420521c 100644 --- a/examples/scroll-behavior/index.html +++ b/examples/scroll-behavior/index.html @@ -1,6 +1,12 @@