Skip to content

Commit 12e9209

Browse files
posvaposva
committed
feat(scroll): allow passing behavior option
BREAKING CHANGE: `scrollBehavior` doesn't accept an object with `x` and `y` coordinates anymore. Instead it accepts an object like [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) with `left` and `top` properties. You can now also pass the [`behavior`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior) property to enable smooth scrolling in most browsers.
1 parent f42ce4b commit 12e9209

File tree

6 files changed

+51
-32
lines changed

6 files changed

+51
-32
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ Check the [playground](https://github.com/vuejs/vue-router-next/tree/master/play
5050
// resolve the request
5151
})
5252
```
53+
- The object returned in `scrollBehavior` is now similar to [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions): `x` is renamed to `left` and `y` is renamed to `top`.
5354

5455
### Typings
5556

‎e2e/scroll-behavior/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const scrollBehavior: ScrollBehavior = async function (
4040

4141
// specify offset of the element
4242
if (to.hash === '#anchor2') {
43-
position.offset = { y: 100 }
43+
position.offset = { top: 100 }
4444
}
4545

4646
if (document.querySelector(position.selector)) {
@@ -56,7 +56,7 @@ const scrollBehavior: ScrollBehavior = async function (
5656
if (to.matched.some(m => m.meta.scrollToTop)) {
5757
// coords will be used if no selector is provided,
5858
// or if the selector didn't match any element.
59-
return { x: 0, y: 0 }
59+
return { left: 0, top: 0 }
6060
}
6161

6262
return false

‎playground/router.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export const router = createRouter({
152152
} else {
153153
// TODO: check if parent in common that works with alias
154154
if (to.matched.every((record, i) => from.matched[i] !== record))
155-
return { x: 0, y: 0 }
155+
return { left: 0, top: 0 }
156156
}
157157
// leave scroll as it is by not returning anything
158158
// https://github.com/Microsoft/TypeScript/issues/18319

‎src/history/html5.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from './common'
1313
import {
1414
computeScrollPosition,
15-
ScrollPositionCoordinates,
15+
_ScrollPositionNormalized,
1616
} from '../scrollBehavior'
1717
import { warn } from '../warning'
1818
import { stripBase } from '../location'
@@ -27,7 +27,7 @@ interface StateEntry extends HistoryState {
2727
forward: HistoryLocationNormalized | null
2828
position: number
2929
replaced: boolean
30-
scroll: Required<ScrollPositionCoordinates> | null | false
30+
scroll: _ScrollPositionNormalized | null | false
3131
}
3232

3333
/**

‎src/router.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ import {
1515
} from './types'
1616
import { RouterHistory, HistoryState } from './history/common'
1717
import {
18-
ScrollPositionCoordinates,
1918
ScrollPosition,
2019
getSavedScrollPosition,
2120
getScrollKey,
2221
saveScrollPosition,
2322
computeScrollPosition,
2423
scrollToPosition,
24+
_ScrollPositionNormalized,
2525
} from './scrollBehavior'
2626
import { createRouterMatcher, PathParserOptions } from './matcher'
2727
import {
@@ -59,7 +59,7 @@ export interface ScrollBehavior {
5959
(
6060
to: RouteLocationNormalized,
6161
from: RouteLocationNormalizedLoaded,
62-
savedPosition: Required<ScrollPositionCoordinates> | null
62+
savedPosition: _ScrollPositionNormalized | null
6363
): Awaitable<ScrollPosition | false | void>
6464
}
6565

@@ -773,7 +773,7 @@ export function createRouter(options: RouterOptions): Router {
773773
): Promise<any> {
774774
if (!isBrowser || !scrollBehavior) return Promise.resolve()
775775

776-
let scrollPosition: Required<ScrollPositionCoordinates> | null =
776+
let scrollPosition: _ScrollPositionNormalized | null =
777777
(!isPush && getSavedScrollPosition(getScrollKey(to.fullPath, 0))) ||
778778
((isFirstNavigation || !isPush) &&
779779
(history.state as HistoryState) &&

‎src/scrollBehavior.ts

+42-24
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
1-
import { RouteLocationNormalized, RouteLocationNormalizedLoaded } from './types'
1+
import {
2+
RouteLocationNormalized,
3+
RouteLocationNormalizedLoaded,
4+
_RouteLocationBase,
5+
} from './types'
26
import { warn } from './warning'
37

8+
// we use types instead of interfaces to make it work with HistoryStateValue type
9+
10+
/**
11+
* Scroll position similar to
12+
* {@link https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions | `ScrollToOptions`}.
13+
* Note that not all browsers support `behavior`.
14+
*/
415
export type ScrollPositionCoordinates = {
5-
/**
6-
* x position. 0 if not provided
7-
*/
8-
x?: number
9-
/**
10-
* y position. 0 if not provided
11-
*/
12-
y?: number
16+
behavior?: ScrollOptions['behavior']
17+
left?: number
18+
top?: number
19+
}
20+
21+
/**
22+
* Internal normalized version of {@link ScrollPositionCoordinates} that always
23+
* has `left` and `top` coordinates.
24+
*
25+
* @internal
26+
*/
27+
export type _ScrollPositionNormalized = {
28+
behavior?: ScrollOptions['behavior']
29+
left: number
30+
top: number
1331
}
1432

1533
export interface ScrollPositionElement {
@@ -47,24 +65,25 @@ export interface ScrollBehaviorHandler<T> {
4765
function getElementPosition(
4866
el: Element,
4967
offset: ScrollPositionCoordinates
50-
): Required<ScrollPositionCoordinates> {
68+
): _ScrollPositionNormalized {
5169
const docRect = document.documentElement.getBoundingClientRect()
5270
const elRect = el.getBoundingClientRect()
5371

5472
return {
55-
x: elRect.left - docRect.left - (offset.x || 0),
56-
y: elRect.top - docRect.top - (offset.y || 0),
73+
behavior: offset.behavior,
74+
left: elRect.left - docRect.left - (offset.left || 0),
75+
top: elRect.top - docRect.top - (offset.top || 0),
5776
}
5877
}
5978

6079
export const computeScrollPosition = () =>
6180
({
62-
x: window.pageXOffset,
63-
y: window.pageYOffset,
64-
} as Required<ScrollPositionCoordinates>)
81+
left: window.pageXOffset,
82+
top: window.pageYOffset,
83+
} as _ScrollPositionNormalized)
6584

6685
export function scrollToPosition(position: ScrollPosition): void {
67-
let normalizedPosition: ScrollPositionCoordinates
86+
let scrollToOptions: ScrollPositionCoordinates
6887

6988
if ('selector' in position) {
7089
/**
@@ -105,27 +124,26 @@ export function scrollToPosition(position: ScrollPosition): void {
105124
warn(`Couldn't find element with selector "${position.selector}"`)
106125
return
107126
}
108-
normalizedPosition = getElementPosition(el, position.offset || {})
127+
scrollToOptions = getElementPosition(el, position.offset || {})
109128
} else {
110-
normalizedPosition = position
129+
scrollToOptions = position
111130
}
112131

113-
window.scrollTo(normalizedPosition.x || 0, normalizedPosition.y || 0)
132+
if ('scrollBehavior' in document.documentElement.style)
133+
window.scrollTo(scrollToOptions)
134+
else window.scrollTo(scrollToOptions.left || 0, scrollToOptions.top || 0)
114135
}
115136

116137
export function getScrollKey(path: string, delta: number): string {
117138
const position: number = history.state ? history.state.position - delta : -1
118139
return position + path
119140
}
120141

121-
export const scrollPositions = new Map<
122-
string,
123-
Required<ScrollPositionCoordinates>
124-
>()
142+
export const scrollPositions = new Map<string, _ScrollPositionNormalized>()
125143

126144
export function saveScrollPosition(
127145
key: string,
128-
scrollPosition: Required<ScrollPositionCoordinates>
146+
scrollPosition: _ScrollPositionNormalized
129147
) {
130148
scrollPositions.set(key, scrollPosition)
131149
}

0 commit comments

Comments
 (0)