fix: 修复侧边栏点击后不自动滚动定位的问题

- 在 onMounted 中调用 initOutlineAutoScroll 初始化函数
- 添加 VPSidebar 选择器支持,修正 VitePress 侧边栏类名
- 修正激活状态类名为 is-active(VitePress 使用)
- 新增 scrollSidebarToActiveItem 函数实现侧边栏自动滚动
- 点击侧边栏链接后自动将激活项平滑滚动到可视区域中心
This commit is contained in:
sanbuphy
2026-02-15 01:56:48 +08:00
parent 73269958b2
commit 004496f1d5
+86 -8
View File
@@ -86,7 +86,6 @@ onMounted(() => {
applyLineHeight(savedLineHeight)
isHydrated.value = true
// 初始化 outline 自动滚动功能
initOutlineAutoScroll()
})
@@ -95,7 +94,34 @@ onMounted(() => {
// 当页面滚动时,自动滚动 outline 让当前激活项保持在可视区域
// ============================================
function initOutlineAutoScroll() {
// 使用 MutationObserver 监听 outline 的变化
const outlineSelectors = [
'.VPDocAsideOutline',
'.VPTableOfContents',
'.vitepress-doc-sidebar',
'.sidebar-outline',
'aside'
]
const sidebarSelectors = [
'.VPSidebar',
'.VPDocSidebar',
'.vitepress-doc-sidebar'
]
let outlineContainer = null
for (const selector of outlineSelectors) {
outlineContainer = document.querySelector(selector)
if (outlineContainer) break
}
if (!outlineContainer) return
let sidebarContainer = null
for (const selector of sidebarSelectors) {
sidebarContainer = document.querySelector(selector)
if (sidebarContainer) break
}
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
@@ -107,7 +133,17 @@ function initOutlineAutoScroll() {
}
})
// 开始监听
const sidebarObserver = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const target = mutation.target
if (target.classList.contains('is-active')) {
scrollSidebarToActiveItem(target)
}
}
}
})
const startObserving = () => {
const outlineContainer = document.querySelector('.VPDocAsideOutline')
if (outlineContainer) {
@@ -116,32 +152,48 @@ function initOutlineAutoScroll() {
subtree: true,
attributeFilter: ['class']
})
const existingActive = outlineContainer.querySelector('.active')
if (existingActive) {
scrollOutlineToActiveItem(existingActive)
}
}
if (sidebarContainer) {
sidebarObserver.observe(sidebarContainer, {
attributes: true,
subtree: true,
attributeFilter: ['class']
})
const existingSidebarActive = sidebarContainer.querySelector('.is-active')
if (existingSidebarActive) {
scrollSidebarToActiveItem(existingSidebarActive)
}
}
}
// 页面加载完成后开始监听
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startObserving)
} else {
startObserving()
}
// 同时监听路由变化(VitePress 是 SPA
const originalPushState = history.pushState
const originalReplaceState = history.replaceState
history.pushState = function (...args) {
originalPushState.apply(this, args)
setTimeout(startObserving, 100)
setTimeout(startObserving, 300)
}
history.replaceState = function (...args) {
originalReplaceState.apply(this, args)
setTimeout(startObserving, 100)
setTimeout(startObserving, 300)
}
window.addEventListener('popstate', () => {
setTimeout(startObserving, 100)
setTimeout(startObserving, 300)
})
}
@@ -172,6 +224,32 @@ function scrollOutlineToActiveItem(activeLink) {
}
}
// 滚动侧边栏让当前激活项保持在可视区域中心
function scrollSidebarToActiveItem(activeItem) {
const sidebarContainer = document.querySelector('.VPSidebar') || document.querySelector('.VPDocSidebar')
if (!sidebarContainer || !activeItem) return
const targetElement = activeItem.querySelector('.item') || activeItem.querySelector('a') || activeItem
const containerRect = sidebarContainer.getBoundingClientRect()
const targetRect = targetElement.getBoundingClientRect()
const targetTop = targetRect.top - containerRect.top + sidebarContainer.scrollTop
const targetHeight = targetRect.height
const targetCenterY = targetTop + targetHeight / 2
const isInside = targetRect.top >= containerRect.top - 20 &&
targetRect.bottom <= containerRect.bottom + 20
if (!isInside) {
const targetScrollTop = targetCenterY - containerRect.height / 2
sidebarContainer.scrollTo({
top: targetScrollTop,
behavior: 'smooth'
})
}
}
watch(fontSize, (next) => {
if (!isHydrated.value) return
const normalized = clampFontSize(next)