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:
2025-12-04 01:47:51 +09:00
parent e66ece71e3
commit 8dba510a6c
3 changed files with 28 additions and 3 deletions

View File

@@ -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();

View File

@@ -18,7 +18,6 @@
@auth
<div class="mt-6 pt-6 border-t border-gray-200">
<a
x-navigate:scroll
href="{{ route('documents.create') }}"
class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"
>

View File

@@ -8,7 +8,6 @@
$displayTitle = basename($file['document']->title);
@endphp
<a
x-navigate:scroll
href="{{ route('documents.show', $file['document']) }}"
class="flex items-center px-2 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100 group"
>