Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 070df96

Browse files
JoostKersjesposva
authored andcommitted
docs: add advanced offsets content for scrollBehavoir (vuejs#2448)
Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>
1 parent ce0554c commit 070df96

File tree

2 files changed

+56
-3
lines changed

2 files changed

+56
-3
lines changed

‎packages/docs/guide/advanced/scroll-behavior.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const router = createRouter({
9292
behavior: 'smooth',
9393
}
9494
}
95-
}
95+
},
9696
})
9797
```
9898

@@ -113,3 +113,29 @@ const router = createRouter({
113113
```
114114

115115
It's possible to hook this up with events from a page-level transition component to make the scroll behavior play nicely with your page transitions, but due to the possible variance and complexity in use cases, we simply provide this primitive to enable specific userland implementations.
116+
117+
## Advanced offsets
118+
119+
If your page has a fixed navbar or similar elements, you might need an offset to ensure the target element isn't hidden behind other content.
120+
Using a static offset value may not always work. You might try CSS-based solutions, like adding offsets with `scroll-margin` or `scroll-padding`, or using `::before` and `::after` pseudo-elements. However, these approaches can lead to unexpected behavior.
121+
122+
In such cases, it's better to calculate the offset manually. A simple way to do this is by combining CSS with JavaScript's `getComputedStyle()`. This lets each element define its own offset dynamically. Here's an example:
123+
124+
```js
125+
const router = createRouter({
126+
scrollBehavior(to, from, savedPosition) {
127+
const mainElement = document.querySelector('#main')
128+
if (mainElement) {
129+
const marginTop = parseFloat(
130+
getComputedStyle(mainElement).scrollMarginTop
131+
)
132+
return {
133+
el: mainElement,
134+
top: marginTop,
135+
}
136+
} else {
137+
return { top: 0 }
138+
}
139+
},
140+
})
141+
```

‎packages/docs/zh/guide/advanced/scroll-behavior.md‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# 滚动行为
2+
23
<VueSchoolLink
34
href="https://vueschool.io/lessons/scroll-behavior"
45
title="Learn how to customize scroll behavior"
@@ -20,7 +21,7 @@ const router = createRouter({
2021
})
2122
```
2223

23-
`scrollBehavior` 函数接收 `to`和`from` 路由对象,如 [Navigation Guards](./navigation-guards.md)。第三个参数 `savedPosition`,只有当这是一个 `popstate` 导航时才可用(由浏览器的后退/前进按钮触发)。
24+
`scrollBehavior` 函数接收 `to`和`from` 路由对象,如 [Navigation Guards](./navigation-guards.md)。第三个参数 `savedPosition`,只有当这是一个 `popstate` 导航时才可用(由浏览器的后退/前进按钮触发)。
2425

2526
该函数可以返回一个 [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) 位置对象:
2627

@@ -91,7 +92,7 @@ const router = createRouter({
9192
behavior: 'smooth',
9293
}
9394
}
94-
}
95+
},
9596
})
9697
```
9798

@@ -112,3 +113,29 @@ const router = createRouter({
112113
```
113114

114115
我们可以将其与页面级过渡组件的事件挂钩,以使滚动行为与你的页面过渡很好地结合起来,但由于使用场景可能存在的差异和复杂性,我们只是提供了这个基础来实现特定的用户场景。
116+
117+
## 高级偏移量
118+
119+
如果你的页面中有固定的导航栏或类似的元素,你可能需要设置偏移量,以确保目标元素不会被其他内容遮挡。
120+
使用静态偏移值并不总是有效。你可以尝试一些基于 CSS 的解决方案,比如使用 `scroll-margin` 或 `scroll-padding` 添加偏移,或者使用 `::before` 和 `::after` 伪元素。然而,这些方法有时会导致意想不到的行为。
121+
122+
在这种情况下,更好的做法是手动计算偏移量。一种简单的方法是结合 CSS 和 JavaScript 的 `getComputedStyle()`。这样每个元素都可以动态定义自己的偏移量。以下是一个示例:
123+
124+
```js
125+
const router = createRouter({
126+
scrollBehavior(to, from, savedPosition) {
127+
const mainElement = document.querySelector('#main')
128+
if (mainElement) {
129+
const marginTop = parseFloat(
130+
getComputedStyle(mainElement).scrollMarginTop
131+
)
132+
return {
133+
el: mainElement,
134+
top: marginTop,
135+
}
136+
} else {
137+
return { top: 0 }
138+
}
139+
},
140+
})
141+
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /