现象#

1. 页面级滚动条在首次导航时切换状态#

原来布局里对整页启用了 OverlayScrollbars(body)。这类库如果接管的是整个页面，而不是局部容器，就很容易在首次真正初始化时替换原生滚动条，从而导致页面宽度发生一次变化。

这正好解释了为什么：

• 第一次点 About / Archive 会偏移
• 之后就稳定了

因为“接管动作”只发生一次。

2. 切页时还有一个临时的页面增高补丁#

布局里原本还有一个 page-height-extend 元素，在 visit:start 到 visit:end 期间会把页面临时拉高，目的是防止切页滚动动画跳动。

这个补丁会影响页面在切换期间的滚动状态，也会放大滚动条相关的抖动问题。

3. 一部分全局样式是在运行时脚本里导入#

OverlayScrollbars 和 PhotoSwipe 的样式原来是在 <script> 里导入的。开发模式下，首次导航时样式可能刚好才完成注入，于是页面首跳更容易出现一次性布局抖动。

固定根滚动条占位#

在根布局里加上：

1
html {
2
  overflow-y: scroll;
3
  scrollbar-gutter: stable;
4
}

这样即使页面内容高度变化，滚动条槽位也不会突然出现或消失。

不再让 OverlayScrollbars 接管整个 body#

保留局部滚动区域的自定义滚动条，但去掉页面级 OverlayScrollbars(body)。

这是这次修复里最关键的一步。

去掉切页期间临时增高页面的补丁#

删除 page-height-extend 和对应的 Swup 钩子逻辑，避免切页过程中人为改变页面滚动状态。

把全局样式提前到 Astro 前置导入#

把：

• overlayscrollbars/overlayscrollbars.css
• photoswipe/style.css

从运行时脚本里移到布局文件的前置导入区，让它们在页面首屏就已经是稳定状态。