Maison > Article > interface Web > Comment obtenir un effet de défilement fluide sur les pages Web grâce à du CSS pur

Comment obtenir un effet de défilement fluide sur les pages Web grâce à du CSS pur

WBOYoriginal: 2023-10-19 10:27:12871parcourir

Dans la conception Web, l'effet de défilement fluide peut offrir aux utilisateurs une bonne expérience de navigation et rendre le changement de page plus fluide. Obtenir des effets de défilement fluides en CSS pur peut éviter d'utiliser JavaScript, optimisant ainsi davantage la vitesse et les performances de chargement des pages. Cet article présentera en détail comment utiliser du CSS pur pour obtenir un effet de défilement fluide des pages Web et fournira des exemples de code spécifiques.

1. Les principes de base de l'effet de défilement
Avant de commencer, comprenons d'abord les principes de base de l'effet de défilement. L'effet de défilement fluide est principalement obtenu grâce à la transition et à la transformation des propriétés CSS. Parmi eux, la transition est utilisée pour définir l'effet de transition de l'élément, tandis que la transformation est utilisée pour définir la position et la déformation de l'élément. En définissant l'attribut de transition sur l'élément cible de défilement, lorsqu'un comportement de défilement se produit, un effet de défilement fluide est obtenu en modifiant l'attribut de transformation de l'élément cible.

2. Créer la structure de base
Tout d'abord, nous devons créer une structure HTML de base. Supposons que l'effet de défilement fluide que nous souhaitons obtenir consiste à cliquer sur le lien de navigation et que la page défilera jusqu'à la position correspondante. L'infrastructure peut contenir une barre de navigation et plusieurs blocs de contenu de page. Chaque lien dans la barre de navigation correspond à un bloc de contenu de page Lorsque vous cliquez sur le lien, la page défilera en douceur jusqu'au bloc de contenu correspondant.

Exemple de code de structure HTML :

<!DOCTYPE html>
<html>
<head>
    <title>平滑滚动效果</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>

    <div id="section1" class="section">
        <h1>Section 1</h1>
    </div>

    <div id="section2" class="section">
        <h1>Section 2</h1>
    </div>

    <div id="section3" class="section">
        <h1>Section 3</h1>
    </div>

</body>
</html>

3. Utilisez CSS pour obtenir un effet de défilement fluide

Tout d'abord, nous devons ajouter un style CSS à chaque bloc de contenu de page pour avoir des hauteurs égales et définir l'attribut de débordement sur Hidden , pour obtenir un effet de défilement fluide lors du changement de page.

Exemple de code CSS :

.section {
    height: 100vh;
    overflow: hidden;
}

Ensuite, nous devons ajouter un événement de clic au lien de navigation et obtenir un effet de défilement fluide en définissant l'attribut de transformation de l'élément cible de défilement.

Exemple de code CSS :

nav ul li a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #f00;
}

nav ul li a:active {
    color: #00f;
}

nav ul li a:focus {
    color: #090;
}

section:target {
    transform: translateY(0);
}

Parmi eux, le sélecteur section:target est utilisé pour sélectionner le bloc de contenu de la page correspondant au lien de navigation cliqué, et obtenir un défilement fluide de la page en définissant l'attribut transform:translateY(0) .

4. Résumé
Réaliser l'effet de défilement fluide des pages Web grâce à du CSS pur peut améliorer l'expérience utilisateur et éviter d'utiliser JavaScript pour optimiser davantage la vitesse et les performances de chargement des pages. Cet article obtient cet effet grâce aux propriétés de transition et de transformation de CSS et fournit des exemples de code spécifiques. J'espère que cet article vous sera utile.

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!

JavaScript css html 事件选择器 overflow transform transition

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint GraalArticle suivant：Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal

Articles Liés

Voir plus