scroll.js
2.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* @flow */
import type Router from '../index'
import { assert } from './warn'
import { getStateKey, setStateKey } from './push-state'
const positionStore = Object.create(null)
export function setupScroll () {
window.addEventListener('popstate', e => {
saveScrollPosition()
if (e.state && e.state.key) {
setStateKey(e.state.key)
}
})
}
export function handleScroll (
router: Router,
to: Route,
from: Route,
isPop: boolean
) {
if (!router.app) {
return
}
const behavior = router.options.scrollBehavior
if (!behavior) {
return
}
if (process.env.NODE_ENV !== 'production') {
assert(typeof behavior === 'function', `scrollBehavior must be a function`)
}
// wait until re-render finishes before scrolling
router.app.$nextTick(() => {
let position = getScrollPosition()
const shouldScroll = behavior(to, from, isPop ? position : null)
if (!shouldScroll) {
return
}
const isObject = typeof shouldScroll === 'object'
if (isObject && typeof shouldScroll.selector === 'string') {
const el = document.querySelector(shouldScroll.selector)
if (el) {
position = getElementPosition(el)
} else if (isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
} else if (isObject && isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
if (position) {
window.scrollTo(position.x, position.y)
}
})
}
export function saveScrollPosition () {
const key = getStateKey()
if (key) {
positionStore[key] = {
x: window.pageXOffset,
y: window.pageYOffset
}
}
}
function getScrollPosition (): ?Object {
const key = getStateKey()
if (key) {
return positionStore[key]
}
}
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
}
}
function isValidPosition (obj: Object): boolean {
return isNumber(obj.x) || isNumber(obj.y)
}
function normalizePosition (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'
}