Technique Docs

Appearance

Problèmes de Navigation et de Défilement ​

Ce document détaille les problèmes connus liés à la navigation (goto) et au défilement (scrollElementIntoView) dans l'application, particulièrement dans les environnements WebView. Ces problèmes découlent des interactions entre le routage côté client de SvelteKit, les stores persistants et la logique personnalisée de focus/défilement.

Problème : <div use:registerScroll /> casse le défilement après goto ​

Symptômes ​

  • Après une navigation côté client (goto), l'élément focalisé n'est pas défilé dans la vue dans la WebView (Android).
  • Le défilement fonctionne initialement au chargement de la page mais échoue après avoir navigué vers une autre page.
  • La navigation par croix directionnelle ne déclenche pas le défilement automatique vers l'élément focalisé.

Cause Racine ​

L'action <div use:registerScroll /> lie le scrollTop de l'élément à un store Svelte persistant ($scrollTop issu de setScrollContext). Ce store conserve la position de défilement entre les navigations.

  • Problème de timing : lors d'une navigation côté client, la nouvelle page est montée et use:registerScroll définit immédiatement div.scrollTop = $scrollTop (par exemple, à une valeur non nulle de la page précédente). La page commence "pré-défilée" au lieu d'être en haut.
  • Spécificités WebView : la WebView s'appuie sur des conteneurs de défilement DOM (pas window), et getScrollParent trouve le <div> comme élément défilable. Un scrollTop initial incorrect biaise tous les calculs.

Résolution ​

Supprimez <div use:registerScroll /> des pages utilisant un focus/défilement personnalisé (par exemple, les pages de test avec navigation par croix directionnelle). Cela permet au défilement de commencer naturellement à 0 sans interférence du store.

  • Avant :

    svelte
    <div use:registerScroll />

  • Après :

    svelte
    <!-- Suppression de use:registerScroll pour éviter les interférences de défilement persistantes -->

Alternatives si registerScroll est nécessaire ​

  • Rendre le store non persistant (local à la page, pas global).
  • Conditionner l'action : ne définir scrollTop que si $scrollTop > 0 et que la page n'est pas fraîchement naviguée.

Tests ​

  • Reproduire : naviguer avec goto dans la WebView, vérifier si l'élément focalisé défile dans la vue.
  • Avec <div use:registerScroll /> : le défilement échoue.
  • Sans : le défilement fonctionne.
  • Utiliser la croix directionnelle pour naviguer dans la page après goto.

Références ​

  • Code : src/lib/navigation/scroll.store.ts, src/lib/navigation/selectable.ts
  • Docs : docs/technique/features/platform-fallback-spec.md pour les différences WebView.

Dernière mise à jour : 23-12-2025 (nettoyage final des mentions de afterNavigate) Responsable : Agent IA

Concept ​

Ce document détaille les problèmes connus liés à la navigation et au défilement dans l'app, particulièrement dans les environnements WebView, dus aux interactions entre le routage client de SvelteKit, les stores persistants, et la logique focus/scroll personnalisée.

Fonctionnement ​

Identification des symptômes, causes racines, et résolutions pour les problèmes de scroll après navigation, avec exemples de code avant/après.

Diagrammes ​

e-novatis
Date de dernière mise à jour : date inconnue