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

15
static/js/main.js
View File

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