vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement transient scroll restoration and disable Lenis

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

41
js/app.js
View file

@ -955,8 +955,45 @@ document.addEventListener('DOMContentLoaded', async () => {
document.querySelector('.play-pause-btn').innerHTML = SVG_PLAY;
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
const navStack = [window.location.hash];

20
js/router.js
View file

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