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).

<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 :

Vous pouvez également 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 :

Accessibilité

Chez certaines personnes, l'effet lisse peut être assez perturbant. C'est pourquoi, il est préférable d'avoir recours à la requête média CSS prefers-reduced-motion qui permet de désactiver ou minimiser la quantité de mouvement.

	

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}	

Source, inspiration, ressources :

En savoir plus sur ce blog sur CSSOM.

Voir sur ce blog le même effet avec JavaScript.

Un très bon article ^(EN) sur cette propriété.

Polyfill .

Voir en corrélation sur ce blog : CSS Scroll Snap module