Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rosary: fix mystery image column clipping at edges
All checks were successful
CI / update (push) Successful in 1m26s
Details

Browse Source 
Use taller edge pads (100vh) for before/after targets so images don't
peek at viewport top or bottom. Scroll to edge pads with zero offset
so previous/next images hide fully behind the sticky header.
This commit is contained in:
Alexander Bocken
2026-02-09 15:15:32 +01:00
parent bf3014337e
commit 07554f16df
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
View File

@@ -424,13 +424,18 @@ function scrollMysteryImage(targetY, duration = 1200) {
} }
// Scroll the mystery image column to the relevant image // Scroll the mystery image column to the relevant image
const IMAGE_COL_HEADER_OFFSET = 6; // rem — keep images below the sticky header
$effect(() => { $effect(() => {
if (!mysteryImageContainer || !hasMysteryImages) return; if (!mysteryImageContainer || !hasMysteryImages) return;
const targetName = getMysteryScrollTarget(activeSection); const targetName = getMysteryScrollTarget(activeSection);
const targetEl = mysteryImageContainer.querySelector(`[data-target="${targetName}"]`); const targetEl = mysteryImageContainer.querySelector(`[data-target="${targetName}"]`);
if (targetEl) { if (targetEl) {
const padding = parseFloat(getComputedStyle(mysteryImageContainer).paddingTop) || 0; const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
scrollMysteryImage(Math.max(0, targetEl.offsetTop - padding)); // Edge pads (before/after): scroll flush so previous image hides behind the header
const offset = targetName === 'before' || targetName === 'after'
? 0
: rem * IMAGE_COL_HEADER_OFFSET;
scrollMysteryImage(Math.max(0, targetEl.offsetTop - offset));
} }
}); });
@@ -1414,7 +1419,6 @@ h1 {
display: block; display: block;
position: sticky; position: sticky;
top: 0; top: 0;
padding-top: 6rem;
align-self: start; align-self: start;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
@@ -1427,6 +1431,10 @@ h1 {
.mystery-image-pad { .mystery-image-pad {
height: calc(100vh - 5rem); height: calc(100vh - 5rem);
} }
.mystery-image-pad[data-target="before"],
.mystery-image-pad[data-target="after"] {
height: 100vh;
}
.mystery-image-column figure { .mystery-image-column figure {
margin: 0; margin: 0;
margin-right: 2rem; margin-right: 2rem;