Change URL hash when user scrolls the page

[brc-dd]

Currently this code changes the URL hash when users click some link to a fragment identifier causing unwanted issues like #890 and #788.

vitepress/src/client/theme-default/composables/outline.ts

Lines 64 to 152 in baf8083

	export function useActiveAnchor(
	container: Ref<HTMLElement>,
	marker: Ref<HTMLElement>
	) {
	const { isAsideEnabled } = useAside()
	const onScroll = throttleAndDebounce(setActiveLink, 100)
	let prevActiveLink: HTMLAnchorElement | null = null
	onMounted(() => {
	requestAnimationFrame(setActiveLink)
	window.addEventListener('scroll', onScroll)
	})
	onUpdated(() => {
	// sidebar update means a route change
	activateLink(location.hash)
	})
	onUnmounted(() => {
	window.removeEventListener('scroll', onScroll)
	})
	function setActiveLink() {
	if (!isAsideEnabled.value) {
	return
	}
	const links = [].slice.call(
	container.value.querySelectorAll('.outline-link')
	) as HTMLAnchorElement[]
	const anchors = [].slice
	.call(document.querySelectorAll('.content .header-anchor'))
	.filter((anchor: HTMLAnchorElement) => {
	return links.some((link) => {
	return link.hash === anchor.hash && anchor.offsetParent !== null
	})
	}) as HTMLAnchorElement[]
	const scrollY = window.scrollY
	const innerHeight = window.innerHeight
	const offsetHeight = document.body.offsetHeight
	const isBottom = scrollY + innerHeight === offsetHeight
	// page bottom - highlight last one
	if (anchors.length && isBottom) {
	activateLink(anchors[anchors.length - 1].hash)
	return
	}
	for (let i = 0; i < anchors.length; i++) {
	const anchor = anchors[i]
	const nextAnchor = anchors[i + 1]
	const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
	if (isActive) {
	history.replaceState(null, document.title, hash ? hash : ' ')
	activateLink(hash)
	return
	}
	}
	}
	function activateLink(hash: string | null) {
	if (prevActiveLink) {
	prevActiveLink.classList.remove('active')
	}
	if (hash !== null) {
	prevActiveLink = container.value.querySelector(
	`a[href="${decodeURIComponent(hash)}"]`
	) as HTMLAnchorElement
	}
	const activeLink = prevActiveLink
	if (activeLink) {
	activeLink.classList.add('active')
	marker.value.style.top = activeLink.offsetTop + 33 + 'px'
	marker.value.style.opacity = '1'
	} else {
	marker.value.style.top = '33px'
	marker.value.style.opacity = '0'
	}
	}
	}

Related SO thread: https://stackoverflow.com/q/7035896/11613622

I am thinking lets remove below line. The outline will still highlight current header. Just the hash won't change on URL.

vitepress/src/client/theme-default/composables/outline.ts

Line 123 in baf8083

history.replaceState(null, document.title, hash ? hash : ' ')

Side note, we also need to support outline: false.

[brc-dd]

Removed that line for now, let's see if we can reintroduce that functionality properly.