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:1714407parcourir

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>

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>

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!

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