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>
This commit is contained in:
parent
689ec3b138
commit
719f6ced53
2 changed files with 14 additions and 2 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -23,8 +23,14 @@
|
|||
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
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue