rosary: snap mystery images instantly at edges
All checks were successful
CI / update (push) Successful in 1m27s
All checks were successful
CI / update (push) Successful in 1m27s
When jumping to the top or bottom of the rosary, snap the mystery image column instantly instead of smooth scrolling.
This commit is contained in:
@@ -182,12 +182,19 @@ $effect(() => {
|
|||||||
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 isEdge = targetName === 'before' || targetName === 'after';
|
||||||
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||||
// Edge pads (before/after): scroll flush so previous image hides behind the header
|
// Edge pads (before/after): scroll flush so previous image hides behind the header
|
||||||
const offset = targetName === 'before' || targetName === 'after'
|
const offset = isEdge ? 0 : rem * IMAGE_COL_HEADER_OFFSET;
|
||||||
? 0
|
const target = Math.max(0, targetEl.offsetTop - offset);
|
||||||
: rem * IMAGE_COL_HEADER_OFFSET;
|
if (isEdge) {
|
||||||
scrollMysteryImage(Math.max(0, targetEl.offsetTop - offset));
|
// Snap instantly when jumping to top/bottom
|
||||||
|
if (mysteryScrollRaf) cancelAnimationFrame(mysteryScrollRaf);
|
||||||
|
mysteryScrollRaf = null;
|
||||||
|
mysteryImageContainer.scrollTop = target;
|
||||||
|
} else {
|
||||||
|
scrollMysteryImage(target);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user