Pouvez-vous créer des animations de défilement CSS pures sans boutons ?-tutoriel CSS-php.cn

Pouvez-vous créer des animations de défilement CSS pures sans boutons ?

DDD

Libérer： 2024-10-29 13:20:29

original

646 Les gens l'ont consulté

Can You Create Pure CSS Scroll Animations Without Buttons?

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>

Copier après la connexion

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!