Contrôle de défilement CSS - Historique et démo à base de scroll-behavior

Le contrôle de défilement est un aspect important du design et de l'expérience utilisateur sur les sites web. CSS propose différentes propriétés et méthodes pour gérer le comportement du défilement. Dans cet article, nous allons explorer l'historique du contrôle de défilement CSS et présenter une démonstration pratique utilisant la propriété scroll-behavior.

Historique du contrôle de défilement CSS

Avant l'introduction des propriétés de contrôle de défilement CSS, les développeurs devaient souvent recourir à des solutions JavaScript pour personnaliser le défilement des éléments. Cela était souvent coûteux en termes de performances et complexifiait le code.

Avec l'évolution des standards CSS, de nouvelles propriétés ont été introduites pour faciliter le contrôle de défilement directement en CSS. Parmi ces propriétés, nous trouvons overflow , overflow-x, overflow-y,overflow-wrap, scroll-behavior, etc.

La propriété scroll-behavior

La propriété scroll-behavior est introduite dans CSS3 pour définir le comportement de défilement d'un élément. Elle permet de contrôler la façon dont le défilement est animé lorsqu'un utilisateur interagit avec l'élément.

La valeur par défaut de la propriété scroll-behavior est auto, ce qui signifie que le défilement se fait de manière instantanée sans aucune animation. Cependant, en définissant la valeur sur smooth, le défilement sera animé de manière fluide.

La syntaxe de la propriété css scroll-behavior

scroll-behavior: auto|smooth|initial|inherit;

Valeurs par défaut	auto
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	Module de visualisation du CSSOM (projet de travail)
Syntaxe JavaScript:	object.style.scrollBehavior="smooth"

Exemple de la propriété scroll-behavior css

Pour illustrer l'utilisation de la propriété scroll-behavior, voici une démo simple. Dans l'exemple ci-dessous, vous pouvez faire défiler le contenu pour voir l'effet de défilement fluide.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS scroll-behavior</title>
<style>
h1 {
  color: #333;
}

p {
  color: #666;
}

.demo-container {
  width: 400px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

</style>
</head>
<body>
<h1>La propriété scroll-behavior css</h1>
  <div class="demo-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada metus eu sagittis consectetur. In auctor mi ac feugiat pharetra. Mauris posuere nulla dui, id tristique dui rhoncus vel. Nulla venenatis velitnec semper facilisis. Phasellus bibendum dolor et augue consectetur, vel pulvinar sapien consequat. Suspendisse potenti. Vestibulum non metus vitae nulla convallis tempor. Pellentesque a odio metus. Nullam a turpis sagittis, fringilla lorem ut, tincidunt nulla. Nunc nec commodo mi. Integer ac velit suscipit, tincidunt ex ac, viverra turpis. Fusce eleifend libero id ligula semper, vitae bibendum enim scelerisque. Nulla facilisi. Integer vestibulum feugiat ullamcorper.</p>
<p>Sed tincidunt nunc vel mi cursus, non commodo nunc vulputate. Suspendisse convallis nisi et felis cursus ultricies. Ut sed metus velit. Nullam fermentum scelerisque mi, a suscipit ex feugiat non. Nunc sit amet iaculis massa. Sed vel dui nec nibh venenatis feugiat. Sed eleifend aliquet sagittis. Nulla pellentesque facilisis quam sed commodo.</p>
<p>Etiam dapibus sollicitudin cursus. In ultricies urna nec fermentum rhoncus. Aenean semper fermentum leo ac tempor. Suspendisse nec gravida nisl. Ut id odio efficitur, tincidunt mi a, scelerisque enim. Sed sollicitudin sapien in mauris lobortis, ac pellentesque est tempor. Proin fermentum ante vitae metus consectetur, id gravida ante finibus.</p></div>

</body>
</html>

Exemple de code CSS

Voici un exemple de code CSS qui utilise la propriété scroll-behavior pour créer un défilement fluide :

.demo-container {
  width: 400px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

Regarder aussi l’article Créer un menu réactif sans JavaScript avec seulement du html pour voir un exemple avec scroll-behavior.

Conclusion

Le contrôle de défilement CSS est devenu plus facile grâce aux propriétés CSS dédiées telles que scroll-behavior. En utilisant cette propriété, les développeurs peuvent créer des expériences de défilement plus agréables et fluides pour les utilisateurs, sans avoir à recourir à des solutions JavaScript complexes.

Il est important de noter que la propriété scroll-behavior est prise en charge par la plupart des navigateurs modernes, mais il peut y avoir des variations de comportement entre les navigateurs. Il est donc essentiel de tester votre code dans différents navigateurs pour assurer une compatibilité optimale.

En explorant les fonctionnalités de contrôle de défilement CSS, vous pourrez améliorer l'expérience utilisateur de vos sites web et offrir des interactions plus fluides et agréables.

Valeurs par défaut	0
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:

Autre exemple pour la propriété css scroll-behavior: smooth

Dans cet exemple le code CSS et HTML met en œuvre la propriété scroll-behavior pour créer un défilement fluide lors de la navigation à l'aide des liens d'ancrage. Lorsque vous cliquez sur un lien avec un attribut href défini sur un autre élément de la page, la page effectuera un défilement fluide jusqu'à cet élément. Cela améliore l'expérience de l'utilisateur en rendant la navigation plus agréable et en évitant les sauts abrupts.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS scroll-behavior</title>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Cliquez sur le lien pour voir l’effet de défilement « lisse »..</p>
  <a href="#section2">Cliquez moi pour voir le défilement smooth(fluide) jusqu’à la section 2 ci-dessous</a>
  <p><b>Remarque :</b> supprimez la propriété scroll-behavior pour supprimer le défilement fluide.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Cliquez sur moi pour voir le défilement smooth(fluide) jusqu’à la section 1 ci-dessus</a>
</div>


</body>
</html>

Le code CSS dans cet exemple implémente la propriété scroll-behavior css pour créer un défilement fluide sur la page HTML. Voici comment le code fonctionne :

La règle CSS html { scroll-behavior: smooth; } est utilisée pour appliquer le défilement fluide à l'ensemble du document HTML. Cela signifie que tous les éléments de défilement, tels que les liens d'ancrage, seront affectés par cette propriété.

Les sélecteurs #section1 et #section2 ciblent deux divs avec les identifiants respectifs section1 et section2.

Pour chaque section, une hauteur de 600 pixels et une couleur de fond sont définies à l'aide des propriétés CSS height et background-color.

Dans la première section (#section1), un titre de niveau 2 (<h2>) est affiché, suivi d'un paragraphe de texte expliquant l'effet de défilement lisse. Un lien d'ancrage est également ajouté avec l'attribut href défini sur #section2, ce qui signifie que lorsque le lien est cliqué, la page effectuera un défilement fluide jusqu'à la section 2.

Dans la deuxième section (#section2), un titre de niveau 2 (<h2>) est affiché, suivi d'un lien d'ancrage avec l'attribut href défini sur #section1. Lorsque ce lien est cliqué, la page effectuera un défilement fluide jusqu'à la section 1.