refactor: replace scroll event with IntersectionObserver for sidebar position updates

- Utilize IntersectionObserver to enhance performance and avoid issues associated with scroll events.
- Implement fine-grained position updates using multiple thresholds for better responsiveness during scrolling.
This commit is contained in:
hamki committed 2026-01-26 16:51:41 +08:00
1 parent e45bc328cc
commit 01554e98cd
1 file changed
+12 -8
+12 -8
View File
@@ -165,15 +165,19 @@ function initSidebarToggle(elFileView: HTMLElement): void {
}); });
resizeObserver.observe(document.body); resizeObserver.observe(document.body);
// Update position on scroll - use requestAnimationFrame for smooth updates // Update position using IntersectionObserver instead of scroll event
let scrollRafId: number | null = null; // This provides better performance and avoids scroll event issues
window.addEventListener('scroll', () => { const fileHeader = elFileView.querySelector('.file-header');
if (scrollRafId !== null) return; // Already scheduled const segment = elFileView.querySelector('.ui.bottom.segment');
scrollRafId = requestAnimationFrame(() => { if (fileHeader && segment) {
// Use many thresholds to get fine-grained position updates during scroll
const thresholds = Array.from({length: 101}, (_, i) => i / 100);
const positionObserver = new IntersectionObserver(() => {
updatePosition(); updatePosition();
scrollRafId = null; }, {threshold: thresholds});
}); positionObserver.observe(segment);
}, {passive: true}); positionObserver.observe(fileHeader);
}
toggleBtn.addEventListener('click', () => { toggleBtn.addEventListener('click', () => {
const isCurrentlyVisible = !sidebar.classList.contains('sidebar-panel-hidden'); const isCurrentlyVisible = !sidebar.classList.contains('sidebar-panel-hidden');