Comment obtenir un effet de défilement via CSS

Dans la conception Web, l'effet de défilement est un effet très courant. Le défilement peut rendre la page Web plus vivante et dynamique. En CSS, définir des effets de défilement est également une compétence relativement basique. Cet article vous expliquera comment obtenir des effets de défilement via CSS.

1. Utilisez l'attribut overflow pour définir la barre de défilement

En CSS, l'attribut overflow peut être utilisé pour définir le mode d'affichage de la barre de défilement, notamment : défilement, auto, masqué et visible. Parmi eux, un moyen de défilement forçant l'affichage de la barre de défilement ; un moyen automatique affichant la barre de défilement en fonction du contenu ; un moyen caché permettant de masquer la barre de défilement ; et un moyen visible affichant toujours la barre de défilement ;

Par exemple :

div {
  width:300px;
  height:100px;
  overflow:scroll;
}

Le code ci-dessus signifie définir un conteneur div avec une largeur de 300px et une hauteur de 100px. Lorsque le contenu dépasse la hauteur du conteneur, la barre de défilement s'affichera.

2. Application ::-webkit-scrollbar pseudo-class pour embellir les barres de défilement

Bien que l'attribut overflow puisse afficher les barres de défilement, le style de barre de défilement par défaut n'est peut-être pas celui que nous souhaitons. A ce stade, nous pouvons utiliser l'option pseudo-classe ::-webkit-scrollbar en CSS pour embellir le style de la barre de défilement. Il est à noter que cette pseudo-classe n'est applicable qu'aux navigateurs dotés du noyau WebKit (tels que Chrome, Safari, etc.).

Ce qui suit est un exemple de code :

div {
  width:300px;
  height:100px;
  overflow:scroll;
}
div::-webkit-scrollbar {
  width:10px;
  height:10px;
}
div::-webkit-scrollbar-thumb {
  background-color:rgba(0,0,0,0.5);
  border-radius: 5px;
}
div::-webkit-scrollbar-track {
  background-color:rgba(0,0,0,0.2);
  border-radius: 5px;
}

Dans le code ci-dessus, le style général de la barre de défilement est défini en définissant div::-webkit-scrollbar, y compris la largeur et la hauteur de la barre de défilement. Définissez le style du curseur de la barre de défilement en définissant div::-webkit-scrollbar-thumb, y compris la couleur d'arrière-plan et le rayon du coin du curseur. Définissez le style de la piste de la barre de défilement en définissant div::-webkit-scrollbar-track, y compris la couleur d'arrière-plan et le rayon du coin de la piste.

3. Utilisez JS pour obtenir un effet de défilement

En plus des deux méthodes ci-dessus, l'utilisation de JS est également un moyen d'obtenir un effet de défilement. Grâce à l'événement scroll de JS, certains événements peuvent être déclenchés lors du défilement de la page. Par exemple :

window.addEventListener('scroll', function(e) {
  console.log(window.scrollY);
});

Le code ci-dessus signifie imprimer la distance de défilement vertical de la fenêtre actuelle lorsque la fenêtre défile.

De plus, vous pouvez également utiliser certains plug-ins pour obtenir des effets de défilement plus riches, tels que fullPage.js, ScrollReveal, etc.

Résumé

Grâce à l'introduction ci-dessus, je pense que tout le monde a une compréhension plus approfondie de la définition des styles de défilement avec CSS. Utiliser CSS pour définir les barres de défilement est une compétence essentielle dans la conception Web, qui rend les pages Web plus vivantes et dynamiques. Et JS nous permet également d'obtenir des effets de défilement plus riches. Utilisons-le de manière flexible dans le développement réel, maîtrisons davantage de compétences et améliorons la conception Web.

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!