Fix sidebar scroll position preservation during page navigation
- Replace unstable x-navigate:scroll directive with custom Alpine event handlers - Use alpine:navigating event to save sidebar scroll position to localStorage - Use alpine:navigated event to restore sidebar scroll position after navigation - Sidebar now maintains scroll position when clicking document links - Fixed 'Element not found' error that was preventing scroll restoration - Uses requestAnimationFrame for smooth DOM restoration
This commit is contained in:
@@ -200,7 +200,7 @@ class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring
|
||||
<div class="flex h-[calc(100vh-4rem)]">
|
||||
<!-- Sidebar - Desktop -->
|
||||
<aside
|
||||
x-navigate:scroll
|
||||
id="kb-sidebar"
|
||||
class="hidden lg:block bg-white border-r border-gray-200 overflow-y-auto relative"
|
||||
:style="'width: ' + sidebarWidth + 'px'"
|
||||
>
|
||||
@@ -259,6 +259,33 @@ class="fixed inset-y-0 left-0 top-16 w-64 bg-white border-r border-gray-200 over
|
||||
|
||||
<!-- Global Keyboard Shortcuts -->
|
||||
<script>
|
||||
// Sidebar scroll position management
|
||||
function saveSidebarScroll() {
|
||||
const sidebar = document.getElementById('kb-sidebar');
|
||||
if (sidebar) {
|
||||
localStorage.setItem('kb_sidebar_scroll_pos', sidebar.scrollTop);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Save scroll position before navigation
|
||||
document.addEventListener('alpine:navigating', saveSidebarScroll);
|
||||
|
||||
// Restore scroll position after navigation
|
||||
document.addEventListener('alpine:navigated', restoreSidebarScroll);
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user