1. Accueil
  2. Utiliser Blocs
  3. Conception
  4. Zone de défilement horizontal

Zone de défilement horizontal

Le conteneur à défilement horizontal permet de positionner le contenu qu'il contient de manière à ce qu'il soit empilé horizontalement plutôt que verticalement. La largeur du conteneur de défilement est dictée par la largeur de son parent, ce qui signifie que tout contenu masqué est accessible par faire défiler horizontalement ou en utilisant la navigation à gauche ainsi que bon boutons pour faire défiler la zone de contenu.


Astuce pour les débutants

La hauteur d'un conteneur à défilement horizontal est calculée en fonction de la hauteur du plus grand élément enfant qu'il contient.

Activer le défilement horizontal

Ajouter un conteneur div Bric à la mise en page de votre site Web et depuis l'inspecteur de la barre latérale type menu déroulant, sélectionnez défilement horizontal.

Contrôles de défilement

Lorsque vous utilisez le type de conteneur à défilement horizontal, Blocs implémentera automatiquement certains contrôles de l'interface utilisateur conçus pour aider les utilisateurs à naviguer dans le contenu dans la zone de défilement horizontal. Il est possible de personnaliser ces contrôles de navigation à l'aide des options suivantes.

Taille du contrôle

Il existe deux options de taille pour les boutons de commande de défilement défaut ainsi que compactL’ défaut L'option donnera à la zone de défilement horizontal des boutons de navigation de taille standard et le compact L'option réduira la taille de ces boutons.

Couleur du bouton

Par défaut, les boutons de navigation du conteneur à défilement horizontal sont d'une couleur sombre semi-transparente. La couleur de remplissage de ces boutons peut être personnalisée à l'aide de la couleur bien étiquetée boutons.

Couleur de l'icône

Par défaut, les icônes du bouton de navigation du conteneur à défilement horizontal sont blanches. La couleur de ces icônes peut être personnalisée à l'aide du puits de couleur étiqueté icônes.

Correction du défilement

Lorsqu'un utilisateur fait défiler manuellement une zone de défilement horizontal et que l'événement de défilement se termine, la correction de défilement tentera de positionner proprement le contenu du conteneur de défilement dans l'espace disponible. Cette option est activée par défaut mais peut être désactivée à l'aide de la case à cocher intitulée Correction du défilement.

Toujours afficher les contrôles de défilement

Par défaut, les contrôles du conteneur de défilement horizontal ne s'afficheront que lorsque le curseur de la souris se trouve sur la zone de défilement. L'activation de cette option forcera les commandes de navigation à toujours être visibles. L'option est désactivée par défaut mais peut être activée à l'aide de la case à cocher intitulée Toujours afficher les contrôles de défilement.

Mis à jour le 12 mars 2023

Cet article a-t-il été utile?

Articles Relatifs