|
|
f6b7ab4333
|
fix(post): scrollToHash 增加 ResizeObserver 布局稳定期，修正 mermaid 异步渲染导致的锚点落点偏移
CI / check (push) Has been cancelled
CI / build (push) Has been cancelled
直接访问 /post/slug#heading 或刷新该 URL 时，目标标题停在屏幕中间偏下，但点击目录
或标题跳转却正常。根因是时序竞争：
post_content 的 use_effect 同步依次调用 __initMermaid（注册 IntersectionObserver，
异步）→ __scrollToHash。scrollToHash 的"立即 + 两帧"校正只覆盖浏览器原生
fragment-scroll；而 mermaid 懒加载（加载 ~1MB bundle → render → pre.innerHTML=svg）
是数百毫秒的异步链，发生在两帧之后。mermaid 块从源码文本膨胀成 SVG 图时撑高内容，
把目标标题推离已校准的落点。mermaid.ts 渲染完成后无任何落点修正。点击目录正常是
因为那时 mermaid 已渲染、布局稳定。
解法：scrollToHash 末尾新增 stabilizeScrollOnResize——在 STABILIZE_WINDOW_MS(2s) 内
用 ResizeObserver 观察 .post-content 容器，检测到布局变化即用 rAF 合并重新校正一次
落点。与 mermaid 解耦，同时覆盖图片/字体等所有异步位移源。用户主动滚动（wheel/
touchmove/keydown）或超时后自动停止，不与交互打架。重入安全：主题切换重跑 use_effect
时先 dispose 上一次稳定器，避免泄漏/叠加。
测试（hash-scroll.test.ts）新增 3 例：resize 后再校正、用户 wheel 后停止、重入清理旧 RO。
|
2026-07-16 16:05:11 +08:00 |
|
|
|
067075df8a
|
fix(post): 直接访问 #hash 时标题被 sticky header 遮住
点击锚点正常，但直接访问带 hashtag 的链接时滚动后标题被 80px sticky
header 遮住。根因：浏览器原生 fragment-scroll（直接访问触发）不读 CSS
scroll-margin-top，在我们 scrollToHash 的平滑滚动之后触发，把标题顶到
视口最顶端（header 下方）。
抽出共享 scrollToHeading：用 getBoundingClientRect 手动计算绝对滚动位置，
减去动态测量的 header 高度（+16px 呼吸空间）后 window.scrollTo，不再依赖
scroll-margin-top。hash-scroll（直接访问）与 anchor-click（点击）统一调用它。
scrollToHash 额外用双 requestAnimationFrame 延后做一次即时校正，覆盖原生
fragment-scroll 的触发窗口，确保落点在原生 scroll 之后生效。
scroll-margin-top: 6rem 保留在 input.css 作其它原生 scroll 场景的兜底。
|
2026-07-13 18:31:31 +08:00 |
|
|
|
81682eb70e
|
fix(post): 修复 hash 锚点跳转失效
内容异步加载(use_server_future)导致骨架屏阶段标题 DOM 缺失，浏览器原生
fragment-scroll 找不到目标留在顶部；刷新页面也因 SSR 出的是骨架屏而失效。
- 新增 __scrollToHash 全局入口(yggdrasil-core)：内容挂载后解码
location.hash(CJK 百分号编码 → 原始字符)并 scrollIntoView
- PostContent use_effect 末尾复用 invoke_optional_global 调用，标题
DOM 已就绪时补一次滚动
- 标题加 scroll-margin-top: 6rem，避开 80px sticky header
点击 TOC/标题 hashtag 由原生 anchor + scroll-margin-top 覆盖，无需 JS。
|
2026-07-10 00:21:08 +08:00 |
|
