From 6081a3d75261e3c8dcef5655cd264a8e2d1d554f Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Mon, 30 Apr 2018 18:48:47 +0800 Subject: [PATCH] fix: unexpected scroll behavior after clicking sidebar links (#298) --- lib/app/app.js | 8 +++++++- lib/app/store.js | 7 +++++++ lib/default-theme/Layout.vue | 11 +++++++++-- 3 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 lib/app/store.js diff --git a/lib/app/app.js b/lib/app/app.js index 924a9663..44db7453 100644 --- a/lib/app/app.js +++ b/lib/app/app.js @@ -3,6 +3,7 @@ import Router from 'vue-router' import Content from './Content' import ClientOnly from './ClientOnly' import dataMixin from './dataMixin' +import store from './store' import NotFound from '@notFound' import { routes } from '@temp/routes' import { siteData } from '@temp/siteData' @@ -57,7 +58,12 @@ export function createApp () { if (saved) { return saved } else if (to.hash) { - return false + if (store.disableScrollBehavior) { + return false + } + return { + selector: to.hash + } } else { return { x: 0, y: 0 } } diff --git a/lib/app/store.js b/lib/app/store.js new file mode 100644 index 00000000..115fe0b9 --- /dev/null +++ b/lib/app/store.js @@ -0,0 +1,7 @@ +// It is not yet time to use Vuex to manage the global state +// singleton object as a global store. +const state = { + disableScrollBehavior: false +} + +export default state diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue index 7ad99f11..df988d69 100644 --- a/lib/default-theme/Layout.vue +++ b/lib/default-theme/Layout.vue @@ -28,6 +28,7 @@ import Navbar from './Navbar.vue' import Page from './Page.vue' import Sidebar from './Sidebar.vue' import { pathToComponentName } from '@app/util' +import store from '@app/store' import { resolveSidebarItems } from './util' import throttle from 'lodash.throttle' @@ -165,7 +166,7 @@ export default { const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link')) const anchors = [].slice.call(document.querySelectorAll('.header-anchor')) .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash)) - + const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) for (let i = 0; i < anchors.length; i++) { @@ -177,7 +178,13 @@ export default { (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10)) if (isActive && this.$route.hash !== anchor.hash) { - this.$router.replace(anchor.hash) + store.disableScrollBehavior = true + this.$router.replace(anchor.hash, () => { + // execute after scrollBehavior handler. + this.$nextTick(() => { + store.disableScrollBehavior = false + }) + }) return } } -- GitLab