Maison >interface Web >tutoriel CSS >Pouvez-vous créer des animations de défilement CSS pures sans boutons ?
Pouvez-vous créer des animations de défilement CSS pures sans boutons ?
- DDDoriginal
- 2024-10-29 13:20:29740parcourir
Animation de défilement CSS pure simplifiée
Bien qu'il soit impressionnant d'implémenter des animations de défilement déclenchées par des boutons de saisie, la question se pose : peut-on obtenir le même effet sans boutons, en utilisant uniquement des balises d'ancrage ?
Solution
Pour créer des animations de défilement fluides sans boutons, nous pouvons exploiter les liens d'ancrage couplés à la propriété scroll-behavior. Cette propriété, prise en charge par les navigateurs modernes comme Firefox, Chrome et Safari, dicte le comportement de défilement dans le conteneur désigné.
Pour mettre en œuvre cette solution :
- Activer le déroulement fluide défilement : Ajouter un comportement de défilement : lisse ; vers le conteneur souhaité (par exemple, HTML ou l'élément parent du contenu à faire défiler).
- Créez des liens d'ancrage : Utilisez des balises d'ancrage () pour créer des liens vers des sections spécifiques ou des éléments sur la page.
- Ajouter des cibles d'ancrage : Spécifiez les cibles des liens d'ancrage à l'aide d'éléments HTML avec les identifiants correspondants.
Exemple d'utilisation :
<code class="html"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body></code>
Support des navigateurs :
Gardez à l'esprit que même si cette technique est prise en charge par les navigateurs populaires, les anciennes versions d'Internet Explorer, non-Chromium Edge et Safari peuvent ne pas le prendre en charge et recourir à des sauts instantanés pour lier des cibles.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!