Improve sidebar scroll position preservation with sessionStorage fallback

- Replace localStorage with sessionStorage for session-based scroll restoration
- Add console logging for debugging scroll behavior
- Support both Livewire and Alpine navigate events
- Intercept sidebar link clicks to ensure scroll position is saved before navigation
- Use setTimeout for smoother DOM restoration timing
- Restore scroll position on page load and window load events
- Sidebar now maintains scroll position consistently across navigation
This commit is contained in:
2025-12-04 01:55:59 +09:00
parent 8dba510a6c
commit 00a5951654

View File

@@ -263,29 +263,60 @@ class="fixed inset-y-0 left-0 top-16 w-64 bg-white border-r border-gray-200 over
function saveSidebarScroll() {
const sidebar = document.getElementById('kb-sidebar');
if (sidebar) {
localStorage.setItem('kb_sidebar_scroll_pos', sidebar.scrollTop);
const scrollPos = sidebar.scrollTop;
sessionStorage.setItem('kb_sidebar_scroll_pos', scrollPos);
console.log('Saved sidebar scroll:', scrollPos);
}
}
function restoreSidebarScroll() {
const sidebar = document.getElementById('kb-sidebar');
if (sidebar) {
const savedPos = localStorage.getItem('kb_sidebar_scroll_pos');
if (savedPos !== null) {
// Use requestAnimationFrame to ensure DOM is ready
requestAnimationFrame(() => {
sidebar.scrollTop = parseInt(savedPos, 10);
});
}
// Use setTimeout to ensure DOM is fully ready
setTimeout(() => {
const savedPos = sessionStorage.getItem('kb_sidebar_scroll_pos');
if (savedPos !== null) {
const pos = parseInt(savedPos, 10);
sidebar.scrollTop = pos;
console.log('Restored sidebar scroll:', pos);
sessionStorage.removeItem('kb_sidebar_scroll_pos');
}
}, 100);
}
}
// Save scroll position before navigation
// For Livewire navigation
document.addEventListener('livewire:navigated', saveSidebarScroll);
document.addEventListener('livewire:navigating', () => {
// Clear on any Livewire navigation
saveSidebarScroll();
});
// For Alpine navigate events
document.addEventListener('alpine:navigating', saveSidebarScroll);
// Restore scroll position after navigation
document.addEventListener('alpine:navigated', restoreSidebarScroll);
// On page load, restore scroll position
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', restoreSidebarScroll);
} else {
restoreSidebarScroll();
}
// Also restore on window load
window.addEventListener('load', restoreSidebarScroll);
// Intercept all link clicks in sidebar to save scroll position
document.addEventListener('click', function(e) {
// Check if click is within sidebar
const sidebar = document.getElementById('kb-sidebar');
const link = e.target.closest('a');
if (sidebar && link && sidebar.contains(link)) {
saveSidebarScroll();
}
});
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();