Le composant Zone de défilement (scrolling)
Le composant Zone de défilement vous permet d'ajouter un élément défilant : il peut s'agir d'un objet (un paragraphe, une barre de défilement, un slider, une image) ou même d'une page. Concrètement c'est un contenu non visible à l'écran et pour lequel il faut glisser le doigt ou la souris verticalement ou horizontalement pour l'afficher.
Dans cet article
💡 Si vous souhaitez créer une liste défilante à partir d'un contenu dynamique, insérez un composant Collection / Liste.
Insérer une zone de défilement
Pour ajouter une zone de défilement, cliquez sur Composants et insérez la Zone de défilement.
Ajustez la taille de la zone visible et double-cliquez dessus pour éditer son contenu. Insérez les objets que vous souhaitez faire défiler : un bloc de texte, une image etc...
Rendez-vous dans les Propriétés pour choisir le type de défilement : Horizontal ou Vertical ou les deux.
Taille de la zone
En fonction du type de défilement ( Horizontal ou Vertical), choisissez la taille de votre défilement.
En cliquant sur le bouton Ajuster, vous définissez la taille de la zone en fonction des objets à l'intérieur.
Autres propriétés
Défilement utilisateur : cette option permet à l'utilisateur de défiler la zone de défilement avec le doigt ou la souris.
Barre de défilement : vous pouvez afficher ou non une barre de défilement.
Rebond : vous pouvez activer ou non un effet de rebond à la fin du défilement
Ralentissement rapide : vous pouvez ajouter un effet de ralentissement rapide?
Créer des marqueurs
Les marqueurs vous permettent d'identifier une position sur votre zone de défilement et d'y associer une action :
- Afficher cette position par défaut
- Déclencher une action à partir de cette position
- Changer de position
Pour créer un marqueur, rentrez à l'intérieur du composant Zone de défilement. Vous pouvez créer un marqueur visuellement en plaçant la zone au bon niveau et en cliquant sur le bouton + ou en cliquant sur la bouton + et en éditer manuellement la position.
Une fois vos marqueurs créés, passez la souris au-dessus de chaque marqueur pour faire apparaître les paramètres, les options et l'icône Punaise qui permet de définir un marqueur par défaut.
Le Magnétisme permet d'imposer un arrêt du défilement au niveau de chaque marqueur
Ajouter une action
Déclencher une action à partir de la zone de défilement
Rendez-vous dans la fenêtre Actions et cliquez sur + Ajouter.
Choisissez votre déclencheur dans la liste :
- Positions [marqueurs]
- Tape / Clique
- Double tape / clique
- Touche
- Relâche
- Glisse vers le haut/bas/droite/gauche
- Survol entrant/sortant
- Démarrage du défilement
- Fin du défilement
Agir sur la zone de défilement
Pour agir sur la zone de défilement, vous devez avoir créé des marqueurs.
Sélectionnez un déclencheur et l'action Agir sur un composant > Zone de défilement.
Vous avez le choix parmi plusieurs actions :
- Changer position
- Position suivante
- Position précédente
Synchroniser une zone de défilement
La Synchronisation vous permet de synchroniser votre composant Zone de défilement avec un autre composant. Pour réaliser un effet Parallaxe, il suffit de créer au moins zones de défilement de taille différente et de les synchroniser.
Voici les paramètres pour synchroniser une zone de défilement :
- Positions en x
- Positions en y
- Marqueurs
Ces paramètres sont accessibles depuis la fenêtre Propriétés du composant Synchronisation.