Zone de défilement (scroll)

Le composant Zone de défilement vous permet de créer une liste défilante, une page défilante, une barre de défilement personnalisée, un slider, une image défilante... transformez votre contenu en élément défilant selon un axe horizontal, vertical ou les deux.

Concrètement il s'agit d'une zone plus grande que la zone visible dans laquelle vous insérez tout type de contenu. Votre utilisateur doit défiler ou “scroller” (horizontalement ou verticalement) avec son doigt pour accéder à l’ensemble du contenu.

Principales utilisations

Insérer une zone de défilement

Cliquez sur  Composants et insérez la Zone de défilement. Double-cliquez sur la zone visible ou cliquez sur EDITER LA ZONE DE DEFILEMENT pour ajouter du contenu.

Choisissez parmi les propriétés suivantes :

propriétés défilement

  • Editer la zone de défilement : pour éditer le contenu ou créer des marqueurs, c’est-à-dire marquer des positions spécifiques dans la zone auxquelles vous pourrez ensuite associer des actions particulières
  • Interaction utilisateur : cette option permet de prendre en compte les interactivités définies sur et dans le composant. Par défaut, cette option est toujours cochée.
  • Défilement : vous pouvez choisir un défilement vertical ou défilement horizontal selon vos besoins. Par défaut, le défilement vertical est sélectionné.
  • Options : vous pouvez choisir d'empêcher le défilement utilisateur, de cacher la barre de défilement, d’enlever le rebond en fin du défilement ou bien d’ajouter un ralentissement.
  • Taille du contenu : pour paramétrer la taille de la zone qui contient le contenu et en ajuster la hauteur et la largeur. La zone visible est quant à elle paramétrable à partir de la barre d’outils.
  • Position par défaut : pour sélectionner la position qui sera affichée au chargement de l’écran (sur la base des marqueurs prédéfinis). Si vous ne définissez rien et que vous retournez sur cet écran, votre écran conservera la dernière position affichée.

Interagir avec la zone de défilement

Déclencher une action

Votre zone de défilement peut déclencher une action. Sélectionnez votre composant et ouvrez la fenêtre  Interactivités. Cliquez sur + AJOUTER ACTION pour accéder à la liste des déclencheurs standards :

  • Simple tap
  • Double tap
  • Touche
  • Relâche
  • Glisse vers le haut/bas/droite/gauche
  • Survol entrant/sortant

Et des déclencheurs spécifiques :

  • Démarrage du défilement
  • Fin du défilement

Créer des marqueurs de position

Si vous souhaitez déclencher une action à une position x de la zone ou déplacer votre zone jusqu'à la position y, vous devez créer des marqueurs.

Pour créer un marqueur, rendez-vous dans la fenêtre  Propriétés du composant et cliquez sur EDITER. Créez un nouveau marqueur depuis la fenêtre Edition.

 Astuce : une fois ces marqueurs définis, vous avez accès à l'option le magnétisme, symbolisée par un aimant. Si vous l’activez, vous imposez l’arrêt du défilement sur ces marqueurs et vos utilisateurs ne pourront donc plus défiler en une seule fois l’ensemble de la zone. Cela vous permet de structurer/chapitrer votre zone de défilement pour que vos utilisateurs visualisent bien les différentes informations.

L'icône de la punaise vous permet de définir un marqueur par défaut.

Ouvrez la fenêtre  Interactivités, sélectionnez votre composant et cliquez sur + AJOUTER ACTION pour retrouver ce temps dans la liste des déclencheurs.

Si vous choisissez l'action Agir sur un composant, vous aurez accès à ces nouvelles possibilités :

  • Changer position
  • Position suivante
  • Position précédente

Synchroniser une zone de défilement

Vous pouvez synchroniser votre zone avec un autre composant (Minuteur, Séquence...) et choisir de synchroniser :

  • Positions en x
  • Positions en y
  • Marqueurs

Ces paramètres sont accessibles depuis la fenêtre  Propriétés du composant Synchronisation.

 

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous