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 voulez faire défiler quelque chose, vous devez l'ajouter dans un composant Zone de défilement. Si vous voulez que l'ensemble de votre écran défile, vous devez faire en sorte que ce composant soit plein écran. 

💡 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.

Cela a-t-il répondu à votre question ? Merci pour les commentaires Il y a eu un problème pour soumettre vos commentaires. Veuillez réessayer plus tard.