app : scroll to top on slide change - closes #72
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
All checks were successful
Deploy / Deploy to Production (push) Successful in 22s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0ca55bed5d
commit
34bc05066f
1 changed files with 14 additions and 1 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { onMount, untrack } from 'svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { slideTo } from '@router'
|
||||
|
||||
|
|
@ -70,6 +70,19 @@
|
|||
if (activeTemplate) document.body.dataset.template = activeTemplate
|
||||
})
|
||||
|
||||
// Scroll to top of the new slide's scrollable container on navigation.
|
||||
$effect(() => {
|
||||
const idx = slides.activeIndex
|
||||
const all = untrack(() => slides.all)
|
||||
if (all.length === 0) return
|
||||
|
||||
const rafId = requestAnimationFrame(() => {
|
||||
const section = document.querySelector(`[data-slide="${all[idx]?.id}"]`)
|
||||
section?.querySelector('.page-scrollable')?.scrollTo(0, 0)
|
||||
})
|
||||
return () => cancelAnimationFrame(rafId)
|
||||
})
|
||||
|
||||
// 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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue