Skip to content

Commit 20b509c

Browse files
committedAug 7, 2023
feat(client): allow customizing scrollOffset padding
closes #2739
1 parent e8ebf1b commit 20b509c

File tree

3 files changed

+21
-8
lines changed

3 files changed

+21
-8
lines changed
 

‎src/client/app/router.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -267,15 +267,20 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
267267
}
268268

269269
if (target) {
270-
const scrollOffset = siteDataRef.value.scrollOffset
271-
let offset: number = 0
270+
let scrollOffset = siteDataRef.value.scrollOffset
271+
let offset = 0
272+
let padding = 24
273+
if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
274+
padding = scrollOffset.padding
275+
scrollOffset = scrollOffset.selector
276+
}
272277
if (typeof scrollOffset === 'number') {
273278
offset = scrollOffset
274279
} else if (typeof scrollOffset === 'string') {
275-
offset = tryOffsetSelector(scrollOffset)
280+
offset = tryOffsetSelector(scrollOffset, padding)
276281
} else if (Array.isArray(scrollOffset)) {
277282
for (const selector of scrollOffset) {
278-
const res = tryOffsetSelector(selector)
283+
const res = tryOffsetSelector(selector, padding)
279284
if (res) {
280285
offset = res
281286
break
@@ -301,12 +306,12 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
301306
}
302307
}
303308

304-
function tryOffsetSelector(selector: string): number {
309+
function tryOffsetSelector(selector: string, padding: number): number {
305310
const el = document.querySelector(selector)
306311
if (!el) return 0
307312
const bot = el.getBoundingClientRect().bottom
308313
if (bot < 0) return 0
309-
return bot + 24
314+
return bot + padding
310315
}
311316

312317
function handleHMR(route: Route): void {

‎src/node/siteConfig.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,11 @@ export interface UserConfig<ThemeConfig = any>
9393
* selector if a selector fails to match, or the matched element is not
9494
* currently visible in viewport.
9595
*/
96-
scrollOffset?: number | string | string[]
96+
scrollOffset?:
97+
| number
98+
| string
99+
| string[]
100+
| { selector: string | string[]; padding: number }
97101

98102
/**
99103
* Enable MPA / zero-JS mode.

‎types/shared.d.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ export interface SiteData<ThemeConfig = any> {
5757
head: HeadConfig[]
5858
appearance: boolean | 'dark'
5959
themeConfig: ThemeConfig
60-
scrollOffset: number | string | string[]
60+
scrollOffset:
61+
| number
62+
| string
63+
| string[]
64+
| { selector: string | string[]; padding: number }
6165
locales: LocaleConfig<ThemeConfig>
6266
localeIndex?: string
6367
contentProps?: Record<string, any>

0 commit comments

Comments
 (0)
Please sign in to comment.