Maison > Article > interface Web > Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS
Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS
- 醉折花枝作酒筹original
- 2021-06-01 16:22:1714421parcourir
En CSS, vous pouvez utiliser le sélecteur de pseudo-classe "::-webkit-scrollbar" pour sélectionner la barre de défilement, puis utiliser le style "display:none" pour ne pas afficher la barre de défilement spécifique ; le format de syntaxe est ":: -webkit-scrollbar{display:none;}".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
::-webkit-scrollbar Le sélecteur de pseudo-classe CSS affecte le style de la barre de défilement d'un élément. Nous pouvons définir la propriété d'affichage du sélecteur ::-webkit-scrollbar sur none pour masquer la barre de défilement.
Comment configurer la barre de défilement pour qu'elle ne s'affiche pas :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
cmcc</br>
</div>
</body>
</html>Rendu :
Avant de définir l'effet CSS :
Après avoir ajouté le style CSS :
Code
<style>
::-webkit-scrollbar {display:none}
</style>Utilisez CSS pour définir la barre de défilement sans effet d'affichage :
barre de défilement CSS sélecteur :
::-webkit-scrollbar — la barre de défilement entière
::-webkit-scrollbar-button — les boutons de la barre de défilement (flèches haut et bas) )
::-webkit-scrollbar-thumb — Curseur de défilement sur la barre de défilement
::-webkit- scrollbar-track — scrollbar-track
::-webkit-scrollbar-track-piece — La partie piste de la barre de défilement sans le curseur
::-webkit -scrollbar-corner — La partie d'intersection lorsqu'il y a à la fois des barres de défilement verticales et horizontales
:: -webkit-resizer — Style partiel de la partie de coin de certains éléments (exemple : bouton déplaçable de la zone de texte)
Apprentissage recommandé : tutoriel vidéo CSS
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!