andrew/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes horizontal scroll behavior for <nav> on small screens

Browse Source
This commit is contained in:
Andrew Gioia 2026-05-06 15:08:32 -04:00
parent a5e9d7298a
commit 8c58a5a697
Signed by: andrew
GPG Key ID: FC09694A000800C8
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/js/main.js
View File

@ -88,9 +88,7 @@ document.addEventListener("DOMContentLoaded", () =>
); );
const scrollActiveItemIntoView = (link, behavior = "auto") => { const scrollActiveItemIntoView = (link, behavior = "auto") => {
const item = link?.closest("li"); if (!link) {
if (!item) {
return; return;
} }
@ -100,8 +98,10 @@ document.addEventListener("DOMContentLoaded", () =>
return; return;
} }
const itemLeft = item.offsetLeft; const listRect = list.getBoundingClientRect();
const itemCenter = itemLeft + (item.offsetWidth / 2); const linkRect = link.getBoundingClientRect();
const itemLeft = linkRect.left - listRect.left + list.scrollLeft;
const itemCenter = itemLeft + (linkRect.width / 2);
const maxScrollLeft = list.scrollWidth - list.clientWidth; const maxScrollLeft = list.scrollWidth - list.clientWidth;
const targetLeft = Math.max(0, Math.min(maxScrollLeft, itemCenter - (list.clientWidth / 2))); const targetLeft = Math.max(0, Math.min(maxScrollLeft, itemCenter - (list.clientWidth / 2)));
@ -140,6 +140,9 @@ document.addEventListener("DOMContentLoaded", () =>
}; };
updateActive(); updateActive();
links.forEach((link) => {
link.addEventListener("click", () => scrollActiveItemIntoView(link, "smooth"));
});
window.addEventListener("scroll", () => updateActive("smooth"), { passive: true }); window.addEventListener("scroll", () => updateActive("smooth"), { passive: true });
window.addEventListener("resize", updateActive); window.addEventListener("resize", updateActive);
}; };