refactor scroll position handling

Author: yyx990803

examples/scroll-behavior/app.js

@@ -24,16 +24,22 @@ const scrollBehavior = (to, from, savedPosition) => {
     // savedPosition is only available for popstate navigations.
     return savedPosition
   } else {
+    let position = {}
     // new navigation.
-    // scroll to anchor
+    // scroll to anchor by returning the selector
     if (to.hash) {
-      return { anchor: true }
+      position.selector = to.hash
     }
-    // explicitly control scroll position
     // check if any matched route config has meta that requires scrolling to top
     if (to.matched.some(m => m.meta.scrollToTop)) {
-      return { x: 0, y: 0 }
+      // cords will be used if no selector is provided,
+      // or if the selector didn't match any element.
+      position.x = 0
+      position.y = 0
     }
+    // if the returned position is falsy or an empty object,
+    // will retain current scroll position.
+    return position
   }
 }
 

src/history/html5.js

@@ -4,6 +4,13 @@ import type VueRouter from '../index'
 import { assert } from '../util/warn'
 import { cleanPath } from '../util/path'
 import { History } from './base'
+import {
+  saveScrollPosition,
+  getScrollPosition,
+  isValidPosition,
+  normalizePosotion,
+  getElementPosition
+} from '../util/scroll-position'
 
 const genKey = () => String(Date.now())
 let _key: string = genKey()
@@ -31,7 +38,9 @@ export class HTML5History extends History {
     })
 
     if (expectScroll) {
-      window.addEventListener('scroll', saveScrollPosition)
+      window.addEventListener('scroll', () => {
+        saveScrollPosition(_key)
+      })
     }
   }
 
@@ -69,30 +78,25 @@ export class HTML5History extends History {
     if (!behavior) {
       return
     }
-
     assert(typeof behavior === 'function', `scrollBehavior must be a function`)
 
-    let position = getScrollPosition()
-    const shouldScroll = behavior(to, from, isPop ? position : null)
-    if (!shouldScroll) {
-      return
-    }
-
     // wait until re-render finishes before scrolling
     router.app.$nextTick(() => {
+      let position = getScrollPosition(_key)
+      const shouldScroll = behavior(to, from, isPop ? position : null)
+      if (!shouldScroll) {
+        return
+      }
       const isObject = typeof shouldScroll === 'object'
-      if (isObject && shouldScroll.x != null && shouldScroll.y != null) {
-        position = shouldScroll
-      } else if (isObject && shouldScroll.anchor) {
-        const el = document.querySelector(to.hash)
+      if (isObject && shouldScroll.selector) {
+        const el = document.querySelector(shouldScroll.selector)
         if (el) {
-          const docTop = document.documentElement.getBoundingClientRect().top
-          const elTop = el.getBoundingClientRect().top
-          position = {
-            x: window.scrollX,
-            y: elTop - docTop
-          }
+          position = getElementPosition(el)
+        } else if (isValidPosition(shouldScroll)) {
+          position = normalizePosotion(shouldScroll)
         }
+      } else if (isObject && isValidPosition(shouldScroll)) {
+        position = normalizePosotion(shouldScroll)
       }
 
       if (position) {
@@ -121,7 +125,7 @@ function pushState (url: string, replace?: boolean) {
       _key = genKey()
       history.pushState({ key: _key }, '', url)
     }
-    saveScrollPosition()
+    saveScrollPosition(_key)
   } catch (e) {
     window.location[replace ? 'assign' : 'replace'](url)
   }
@@ -130,16 +134,3 @@ function pushState (url: string, replace?: boolean) {
 function replaceState (url: string) {
   pushState(url, true)
 }
-
-function saveScrollPosition () {
-  if (!_key) return
-  window.sessionStorage.setItem(_key, JSON.stringify({
-    x: window.pageXOffset,
-    y: window.pageYOffset
-  }))
-}
-
-function getScrollPosition (): ?{ x: number, y: number } {
-  if (!_key) return
-  return JSON.parse(window.sessionStorage.getItem(_key))
-}

src/util/scroll-position.js

@@ -0,0 +1,38 @@
+/* @flow */
+
+export function saveScrollPosition (key: string) {
+  if (!key) return
+  window.sessionStorage.setItem(key, JSON.stringify({
+    x: window.pageXOffset,
+    y: window.pageYOffset
+  }))
+}
+
+export function getScrollPosition (key: string): ?Object {
+  if (!key) return
+  return JSON.parse(window.sessionStorage.getItem(key))
+}
+
+export function getElementPosition (el: Element): Object {
+  const docRect = document.documentElement.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  return {
+    x: elRect.left - docRect.left,
+    y: elRect.top - docRect.top
+  }
+}
+
+export function isValidPosition (obj: Object): boolean {
+  return isNumber(obj.x) || isNumber(obj.y)
+}
+
+export function normalizePosotion (obj: Object): Object {
+  return {
+    x: isNumber(obj.x) ? obj.x : window.pageXOffset,
+    y: isNumber(obj.y) ? obj.y : window.pageYOffset
+  }
+}
+
+function isNumber (v: any): boolean {
+  return typeof v === 'number'
+}