Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-17 18:50:59 +02:00
Code Issues Activity

refactor: replace scroll event with IntersectionObserver for sidebar position updates

Browse Source 
- 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 2026-01-16 05:15:29 +08:00
parent e45bc328cc
commit 01554e98cd
No known key found for this signature in database
GPG Key ID: 092D4EC7F4DECB68
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web_src/js/features/file-view.ts
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');