J'utilise le routage svelte et svelte pour créer un site Web et essayer de faire défiler vers le haut de la page chaque fois qu'un utilisateur navigue. Dans d'autres Frameworks comme React window.scrollTo (0, 0) fonctionne parfaitement. Dans Svelte, le code suivant ne fait malheureusement rien:
import { onMount } from "svelte";
onMount(() => window.scrollTo(0,0));
Alors, quelle est l'astuce pour que cela fonctionne?
3 Réponses :
Vous pouvez également vous lier à des propriétés de fenêtre telles que scrollX et scrollY à l'aide de la liaison de fenêtre svelte ( API doc ) :
<svelte:window bind:scrollY={y}/>
Vous pouvez maintenant lire et définir la propriété y. Voir ce REPL de Svelte docs .
Non, j'ai déjà essayé et le y est toujours indéfini. Il y a peut-être un problème avec le paquet de routage que j'utilise (svelte-routing).
D'accord, le bogue n'était pas un problème svelte. Le problème était avec les styles html. On dirait que le débordement du code HTML devait être réglé sur auto pour fonctionner et non! sur le corps. Quiconque rencontre également ce bogue peut consulter ce fil de discussion .
Installez le package Svelte-scrollto à partir de npm. Cela facilite le défilement avec l'animation.
<script>
import * as animateScroll from "svelte-scrollto";
</script>
<a on:click={() => animateScroll.scrollToBottom()}> Scroll to bottom </a>
<a on:click={() => animateScroll.scrollToTop()}> Scroll to top </a>
puis dans votre fichier svelte
npm i svelte-scrollto
Veuillez consulter ce REPL, tout fonctionne comme prévu, non?
Oui, cela fonctionne bien. Je dois donc avoir une sorte de bogue dans mon code. Je ne peux vraiment penser à rien.