feat: 添加滚动重置插件
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,44 @@
|
|||||||
|
export default defineNuxtPlugin(() => {
|
||||||
|
if (typeof window === 'undefined') return
|
||||||
|
|
||||||
|
let observer: IntersectionObserver | null = null
|
||||||
|
let headings: HTMLElement[] = []
|
||||||
|
|
||||||
|
function initScrollSpy() {
|
||||||
|
// 清理旧的 observer
|
||||||
|
if (observer) observer.disconnect()
|
||||||
|
|
||||||
|
// 收集所有带 id 的标题
|
||||||
|
headings = Array.from(document.querySelectorAll('.prose h2[id], .prose h3[id]')) as HTMLElement[]
|
||||||
|
if (headings.length === 0) return
|
||||||
|
|
||||||
|
observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const id = entry.target.getAttribute('id')
|
||||||
|
if (id) {
|
||||||
|
history.replaceState(null, '', `#${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ rootMargin: '-80px 0px -70% 0px' }
|
||||||
|
)
|
||||||
|
|
||||||
|
headings.forEach(h => observer!.observe(h))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路由切换后重新初始化
|
||||||
|
const router = useRouter()
|
||||||
|
router.afterEach(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(initScrollSpy, 100)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 首次加载
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(initScrollSpy, 100)
|
||||||
|
})
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user