Dans ce chapitre, on va découvrir la propriété overflow. Elle permet de gérer ce qu'il se passe lorsqu'un contenu dépasse de son conteneur, et notamment de contrôler l'apparition des zones de défilement.
Le principe de overflow
Par défaut, lorsqu'un élément est trop petit pour contenir son contenu, le navigateur laisse ce contenu déborder et la propriété overflow permet justement de changer ce comportement (c'est un racourci pour les propriété overflow-x et overflow-y).
overflow: hidden
La valeur hidden permet de masquer tout ce qui dépasse d'un élément.
.box {
width: 200px;
height: 200px;
overflow: hidden;
}Avec cette règle, le contenu reste présent dans l'élément, mais tout ce qui sort de la boîte n'est plus visible.
C'est une solution utile quand on veut masquer un débordement visuel ou éviter un scroll parasite sur la page.
overflow: scroll
La valeur scroll force l'affichage de barre de défilement.
.box {
overflow: scroll;
}Dans ce cas, le navigateur affiche des barres de défilement même si le contenu ne déborde pas réellement.
overflow: auto
La valeur auto est souvent la plus pratique.
.box {
overflow: auto;
}Ici, les scrollbars n'apparaissent que si elles sont nécessaires et c'est en généralement le comportement que l'on recherche.
Comportement
Quand un élément interne devient scrollable, la scrollbar apparaît généralement au-dessus du contenu.
En revanche, la scrollbar principale du document se comporte différemment sur certains navigateurs : elle peut réserver de l'espace et modifier la largeur réellement disponible. Cela peut provoquer un petit décalage visuel quand la page passe soudainement d'un état sans scrollbar à un état avec scrollbar.
Éviter les sauts de mise en page avec scrollbar-gutter
Pour éviter ce décalage, CSS propose la propriété scrollbar-gutter.
html {
scrollbar-gutter: stable;
}Avec stable, l'espace de la scrollbar est réservé à l'avance. Ainsi, si la page devient scrollable plus tard, la mise en page ne bouge pas.
C'est une propriété intéressante à appliquer sur le document lorsqu'on sait que certaines pages peuvent parfois afficher une scrollbar et parfois non.
Attention à 100vw
Il y a un piège classique avec les unités en vw.
.screen {
width: 100vw;
}On pourrait croire que 100vw correspond exactement à la largeur visible de la page. En réalité, selon les navigateurs et la gestion de la scrollbar, cette unité peut inclure la gouttière réservée au scroll.
Un élément en 100vw peut alors devenir plus large que la page et créer un débordement horizontal en faisant apparaître une scrollbar horizontal.
Gérer l'arrêt du scroll avec le snap
Quand on crée un défilement horizontal, on peut aller plus loin avec le scroll snapping qui permet de demander au navigateur de s'arréter spécifiquement sur certains éléments.
Le parent reçoit scroll-snap-type qui permet d'indiquer le comportement à avoir :
.products {
overflow: auto;
scroll-snap-type: x proximity;
}Les enfants reçoivent scroll-snap-align qui permet d'indiquer sur quel position de l'élément le défilement doit se verouiller :
.product {
scroll-snap-align: start;
}Cela permet de demander au navigateur d'aligner les cartes sur certaines positions lorsqu'on arrête de défiler.
Personnaliser les scrollbars
Sur certains navigateurs, il est possible de styliser les scrollbars avec des pseudo-éléments spécifiques.
.sidebar::-webkit-scrollbar {
width: 0.7rem;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: #d9c6a5;
border: 2px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}Cela donne une scrollbar plus soignée et plus proche du design du site.
Il faut toutefois garder en tête que ces pseudo-éléments ::-webkit-scrollbar ne sont pas standardisés et ne fonctionne que sur des navigateurs basés sur le moteur Chromium (Chrome, Brave...). Les autres navigateurs se contenteront d'ignorer ces règles.
On parle ici d'amélioration progressive. Les navigateurs compatibles profitent d'un meilleur rendu, les autres gardent simplement leur scrollbar native.
