Maison > Article > interface Web > Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS
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!