📦 Système d'Overflow Orochi

Utilisez notre système d'overflow complet pour contrôler le comportement des éléments qui dépassent de leur conteneur. Le système inclut des classes pour gérer le débordement horizontal, vertical et les deux axes simultanément.

Overflow de base

Le framework Orochi propose plusieurs classes pour contrôler le comportement de débordement des éléments. Ces classes s'appliquent aux deux axes (horizontal et vertical).

.o-overflow-auto (contenu qui dépasse)
.o-overflow-auto Ajoute des barres de défilement si nécessaire
.o-overflow-hidden (contenu qui dépasse)
.o-overflow-hidden Cache le contenu qui dépasse
.o-overflow-visible (contenu qui dépasse)
.o-overflow-visible Affiche le contenu même s'il dépasse
.o-overflow-scroll (contenu qui dépasse)
.o-overflow-scroll Ajoute toujours des barres de défilement 
<div class="o-overflow-auto">Contenu qui dépasse...</div>
<div class="o-overflow-hidden">Contenu qui dépasse...</div>
<div class="o-overflow-visible">Contenu qui dépasse...</div>
<div class="o-overflow-scroll">Contenu qui dépasse...</div>

Overflow horizontal

Contrôlez spécifiquement le débordement sur l'axe horizontal avec ces classes spécialisées.

.o-overflow-x-auto (contenu large qui dépasse horizontalement)
.o-overflow-x-auto Barre de défilement horizontale si nécessaire
.o-overflow-x-hidden (contenu large qui dépasse horizontalement)
.o-overflow-x-hidden Cache le débordement horizontal
.o-overflow-x-visible (contenu large qui dépasse horizontalement)
.o-overflow-x-visible Affiche le contenu même s'il dépasse horizontalement
.o-overflow-x-scroll (contenu large qui dépasse horizontalement)
.o-overflow-x-scroll Barre de défilement horizontale toujours visible 
<div class="o-overflow-x-auto">Contenu large...</div>
<div class="o-overflow-x-hidden">Contenu large...</div>
<div class="o-overflow-x-visible">Contenu large...</div>
<div class="o-overflow-x-scroll">Contenu large...</div>

Overflow vertical

Contrôlez spécifiquement le débordement sur l'axe vertical avec ces classes spécialisées.

.o-overflow-y-auto
(contenu haut qui dépasse verticalement)
Plus de contenu...
.o-overflow-y-auto Barre de défilement verticale si nécessaire
.o-overflow-y-hidden
(contenu haut qui dépasse verticalement)
Plus de contenu...
.o-overflow-y-hidden Cache le débordement vertical
.o-overflow-y-visible
(contenu haut qui dépasse verticalement)
Plus de contenu...
.o-overflow-y-visible Affiche le contenu même s'il dépasse verticalement
.o-overflow-y-scroll
(contenu haut qui dépasse verticalement)
Plus de contenu...
.o-overflow-y-scroll Barre de défilement verticale toujours visible 
<div class="o-overflow-y-auto">Contenu haut...</div>
<div class="o-overflow-y-hidden">Contenu haut...</div>
<div class="o-overflow-y-visible">Contenu haut...</div>
<div class="o-overflow-y-scroll">Contenu haut...</div>

Applications pratiques

Découvrez comment utiliser l'overflow dans des cas concrets pour améliorer l'expérience utilisateur.

Conteneurs de texte avec défilement

Conteneur avec défilement automatique

Ce conteneur affichera des barres de défilement uniquement si le contenu dépasse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut sit amet enim vel lacus sodales consectetur.

Conteneur avec défilement forcé

Ce conteneur affichera toujours des barres de défilement, même si le contenu ne dépasse pas.

Parfait pour maintenir une disposition cohérente.

<div class="o-overflow-auto">
  <h4>Conteneur avec défilement automatique</h4>
  <p>Contenu long...</p>
</div>

<div class="o-overflow-scroll">
  <h4>Conteneur avec défilement forcé</h4>
  <p>Contenu court...</p>
</div>

Navigation horizontale

Élément 1
Élément 2
Élément 3
Élément 4
Élément 5
Une navigation horizontale avec défilement sur les petits écrans 
<div class="o-overflow-x-auto">
  <div class="o-d-flex" style="min-width: 600px;">
    <div class="o-card">Élément 1</div>
    <div class="o-card">Élément 2</div>
    <div class="o-card">Élément 3</div>
    <div class="o-card">Élément 4</div>
    <div class="o-card">Élément 5</div>
  </div>
</div>

💡 Astuce

Utilisez les classes d'overflow pour gérer le contenu qui dépasse de manière élégante. .o-overflow-auto est généralement préféré car il n'affiche les barres de défilement que lorsque c'est nécessaire. Pour les interfaces mobiles, envisagez d'utiliser -webkit-overflow-scrolling: touch pour un défilement plus fluide.