Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS-tutoriel CSS-php.cn

Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS

醉折花枝作酒筹

Libérer： 2023-01-06 11:16:01

original

14417 Les gens l'ont consulté

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;}".

Comment faire en sorte que la barre de défilement ne s'affiche pas en CSS

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>

Copier après la connexion

Rendu :

Avant de définir l'effet CSS :

Comment faire en sorte que la barre de défilement ne saffiche pas en CSS

Après avoir ajouté le style CSS :

Code

<style>
     ::-webkit-scrollbar {display:none}
</style>

Copier après la connexion

Utilisez CSS pour définir la barre de défilement sans effet d'affichage :

Comment faire en sorte que la barre de défilement ne saffiche pas en CSS

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!