Automated release for theme-earthquake v1.1.3.
Commit
- SHA:
e151b49fff07f9ea4e0064a59810ee3f3dce4652
Message
v1.1.3: 修复悬浮评论按钮跳回顶部 + TOC scrollIntoView 干扰锚点跳转
根因确认:
点击悬浮评论按钮 href=#post-comment 触发浏览器滚动到底部，
滚动事件触发 TOC 的 scroll 监听器，setActiveHeading 调用
link.scrollIntoView(block:nearest)。由于 .toc 无 overflow 不是
滚动容器，且 sticky TOC 在长文章中会脱离 sticky 范围滚出视口，
scrollIntoView 向上查找可滚动祖先最终滚动整个页面 → 跳回顶部。
修复内容:
1. src/assets/utils/toc.ts setActiveHeading 重写:
- 分离 class 切换与滚动逻辑
- 检查 active link 是否在 .toc 容器可视区域内
- 检查 .toc 容器本身是否在视口内
- 仅当 link 不可见且容器可见时才调用 scrollIntoView
- 触摸设备仍跳过 scrollIntoView
2. src/assets/styles/main.css 为 .toc 添加滚动上下文:
- max-height: calc(100vh - 12rem)
- overflow-y: auto 使其成为独立滚动容器
- overscroll-behavior: contain 防止滚动链
- OKLCH 滚动条样式与全局一致
验证场景:
- 点击悬浮评论按钮 → 平滑滚动到评论区不再跳回顶部
- TOC 目录高亮 → 仅在 .toc 容器内滚动不影响页面位置
- TOC 滚出视口(长文章底部) → 不再调用 scrollIntoView
版本号 1.1.2 → 1.1.3
Changed files
M src/assets/styles/main.css
M src/assets/utils/toc.ts
M theme.yaml