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:
@@ -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
|
||||
document.addEventListener('alpine:navigating', saveSidebarScroll);
|
||||
// For Livewire navigation
|
||||
document.addEventListener('livewire:navigated', saveSidebarScroll);
|
||||
document.addEventListener('livewire:navigating', () => {
|
||||
// Clear on any Livewire navigation
|
||||
saveSidebarScroll();
|
||||
});
|
||||
|
||||
// Restore scroll position after navigation
|
||||
// For Alpine navigate events
|
||||
document.addEventListener('alpine:navigating', saveSidebarScroll);
|
||||
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();
|
||||
|
||||
Reference in New Issue
Block a user