Twitter

Partagez cet article :

Propriété CSS scroll-behavior

Dernière mise à jour : juin 2022

CSSOM View

Avant d'évoquer la propriété CSS scroll-behavior, il nous faut parler de CSSOM View Module , qui est en cours d'élaboration (Working Draft).


CSSOM View (ou Vue CSSOM) est un module de la spécification CSS qui définit la manière de manipuler la vue d'un document, notamment le type de comportement à adopter lors du défilement dans une zone d'affichage.


Propriété scroll-behavior

Cette propriété va définir le type de comportement lors du défilement dans une zone d'affichage.

Elle comprend deux valeurs :

  • auto : valeur initiale
  • smooth

A quoi sert concrètement cette propriété ? C'est assez simple. Elle permet d'ajouter une transition plus douce lors du défilement.

Facile à mettre en place, il suffit de renseigner dans l'élément body ou en ciblant l'élément html le code suivant :



html{

scroll-behavior: smooth

}


Et ... c'est tout ! Attention toutefois, l'effet sera appliqué à l'ensemble de la fenêtre d'affichage.

Les navigateurs peuvent décider ne de pas appliquer cette propriété. Par exemple, si la propriété est déclarée dans l'élément body, elle ne se propage pas à la zone d'affichage (viewport). C'est le cas du navigateur Chrome, mais fonctionne sur Firefox.


Exemples d'utilisation :

Ci-dessous, vous trouverez une liste d'ancres. En cliquant sur les liens, vous allez constater que le scroll (défilement) est lisse (smooth).

Lien1
Lien2
Lien3
Lien4
Lien5


<nav>
<ul>
<li><a href="#lien1">Lien1</a></li>
<li><a href="#lien2">Lien2</a></li>  
<li><a href="#lien3">Lien3</a></li> 
<li><a href="#lien4">Lien4</a></li>
<li><a href="#lien5">Lien5</a></li> 
</ul>
</nav>
<div class=contenu>
<div id=lien1 class=exemple>
Lien1
</div>
<div id=lien2 class=exemple>
Lien2
</div>
<div id=lien3 class=exemple>
Lien3
</div>
<div id=lien4 class=exemple>
Lien4
</div>
<div id=lien5 class=exemple>
Lien5
</div>
</div>





nav ul{

display: flex;
flex-flow: column;
row-gap: 1rem;
margin-top: 1rem

}

.contenu{

height: 300px;
overflow-y: scroll;
scroll-behavior: smooth

}

.exemple{

font-size: calc(100vw/16);
display: grid;
place-items: center;
height:inherit

}
	


Sans cette propriété, le saut est brutal :

Lien1
Lien2
Lien3
Lien4
Lien5

Egalement, vous pouvez utiliser cette propriété pour un haut de page (back to top).

On peut trouver d'autres utilités à cette propriété, comme par exemple la navigation sur une onepage :



Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.

haut page