feat: implement transient scroll restoration and disable Lenis

This commit is contained in:
Julien Maille 2026-01-18 23:25:23 +01:00
parent 024f44aa05
commit 48da88c12d
2 changed files with 49 additions and 12 deletions

View file

@ -955,8 +955,45 @@ document.addEventListener('DOMContentLoaded', async () => {
document.querySelector('.play-pause-btn').innerHTML = SVG_PLAY; document.querySelector('.play-pause-btn').innerHTML = SVG_PLAY;
const router = createRouter(ui); const router = createRouter(ui);
router();
window.addEventListener('hashchange', router); // Session-based scroll positions (transient, cleared on refresh)
const scrollPositions = new Map();
const handleRouter = async (e) => {
// Save scroll position for the previous page if available
if (e && e.oldURL) {
try {
const url = new URL(e.oldURL);
const oldHash = url.hash || '#home';
const content = document.querySelector('.main-content');
if (content) {
scrollPositions.set(oldHash, content.scrollTop);
}
} catch {
// Ignore URL parsing errors
}
}
// Render the new page
await router();
// Restore scroll position for the new page
const newHash = window.location.hash || '#home';
const content = document.querySelector('.main-content');
if (content) {
const savedScroll = scrollPositions.get(newHash);
if (savedScroll !== undefined) {
// Small timeout to ensure DOM layout is stable after render
setTimeout(() => {
content.scrollTop = savedScroll;
}, 0);
}
}
};
// Initial load
await handleRouter(null);
window.addEventListener('hashchange', handleRouter);
// Simple Navigation History // Simple Navigation History
const navStack = [window.location.hash]; const navStack = [window.location.hash];

View file

@ -2,37 +2,37 @@
import { getTrackArtists } from './utils.js'; import { getTrackArtists } from './utils.js';
export function createRouter(ui) { export function createRouter(ui) {
const router = () => { const router = async () => {
const path = window.location.hash.substring(1) || 'home'; const path = window.location.hash.substring(1) || 'home';
const [page, param] = path.split('/'); const [page, param] = path.split('/');
switch (page) { switch (page) {
case 'search': case 'search':
ui.renderSearchPage(decodeURIComponent(param)); await ui.renderSearchPage(decodeURIComponent(param));
break; break;
case 'album': case 'album':
ui.renderAlbumPage(param); await ui.renderAlbumPage(param);
break; break;
case 'artist': case 'artist':
ui.renderArtistPage(param); await ui.renderArtistPage(param);
break; break;
case 'playlist': case 'playlist':
ui.renderPlaylistPage(param, 'api'); await ui.renderPlaylistPage(param, 'api');
break; break;
case 'userplaylist': case 'userplaylist':
ui.renderPlaylistPage(param, 'user'); await ui.renderPlaylistPage(param, 'user');
break; break;
case 'mix': case 'mix':
ui.renderMixPage(param); await ui.renderMixPage(param);
break; break;
case 'library': case 'library':
ui.renderLibraryPage(); await ui.renderLibraryPage();
break; break;
case 'recent': case 'recent':
ui.renderRecentPage(); await ui.renderRecentPage();
break; break;
case 'home': case 'home':
ui.renderHomePage(); await ui.renderHomePage();
break; break;
default: default:
ui.showPage(page); ui.showPage(page);