Compare commits

...

2 commits

Author SHA1 Message Date
isUnknown
edc3e3db1d footer : remove immediate onScroll call on slide change refs #59
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
Calling onScroll() immediately after attaching the listener caused the
footer to appear on page load when content height exceeded clientHeight
by less than the threshold (0 >= smallOverflow - 100 = true at scrollTop=0).
Footer now starts hidden and only reveals on explicit user scroll.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-15 08:33:08 +02:00
isUnknown
719f6ced53 footer : fix data-template sync and atBottom overflow guard refs #59
- App.svelte: sync body[data-template] on every active template change.
  PHP only sets it on initial load; SPA navigation left it stale (e.g.
  stuck on "home"), breaking CSS selectors like [data-template="white-paper"].
- Footer.svelte: guard atBottom with an overflow check.
  When scrollHeight === clientHeight (no overflow), the old formula
  (0 >= 0 - threshold) was always true, showing the footer immediately
  on pages with no scrollable content (e.g. white-paper detail on load).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-15 08:25:32 +02:00
2 changed files with 17 additions and 3 deletions

View file

@ -64,6 +64,12 @@
img.src = BG_URL
}
// Sync body[data-template] with the active template so CSS selectors (e.g. footer hide)
// stay correct on SPA navigation — PHP only sets it on the initial page load.
$effect(() => {
if (activeTemplate) document.body.dataset.template = activeTemplate
})
// Active la transition seulement après le premier paint à la bonne position.
// Double rAF : le premier laisse passer un paint avec le bon translateX,
// le second active is-animated — évite l'animation parasite au chargement.

View file

@ -23,15 +23,23 @@
function onScroll() {
if (rafId) return
rafId = requestAnimationFrame(() => {
const threshold = window.innerWidth > 800 ? 100 : 200
const atBottom = scrollableContainer.scrollTop >= scrollableContainer.scrollHeight - scrollableContainer.clientHeight - threshold
const scrollHeight = scrollableContainer.scrollHeight
const clientHeight = scrollableContainer.clientHeight
const threshold = window.innerWidth > 800 ? 100 : 200
// Only show footer when content actually overflows AND user is near the bottom.
// Without the overflow guard, atBottom is true even when scrollHeight === clientHeight
// (0 >= 0 - threshold), causing the footer to appear on pages with no scroll.
const overflows = scrollHeight > clientHeight
const atBottom = overflows && scrollableContainer.scrollTop >= scrollHeight - clientHeight - threshold
isHidden = !atBottom
rafId = null
})
}
scrollableContainer.addEventListener('scroll', onScroll)
onScroll()
// No immediate onScroll() call: footer starts hidden and only reveals when
// the user actively scrolls near the bottom. Calling it immediately caused
// the footer to flash on page load when content barely exceeded the threshold.
return () => {
scrollableContainer.removeEventListener('scroll', onScroll)