Maison > Article > interface Web > Comment changer la position de la barre de défilement en utilisant CSS ?

Comment changer la position de la barre de défilement en utilisant CSS ?

WBOYavant: 2023-08-26 16:09:045134parcourir

Les barres de défilement font référence à des éléments qui permettent aux utilisateurs de faire défiler le contenu Web. Il apparaît généralement sous la forme d'une barre horizontale ou verticale sur le côté ou en bas de la page. La barre de défilement est également appelée « pouce de la barre de défilement » et constitue la partie de la barre de défilement qui se déplace lorsque l'utilisateur fait défiler vers le haut ou vers le bas.

Dans cet article, nous verrons comment modifier la position des barres de défilement à l'aide de CSS. Nous aborderons les sujets suivants -

Créez une nouvelle classe pour l'élément
Positionnement des barres de défilement et des pouces
Utilisez la propriété "position" pour changer la position de la barre de défilement

Créez une nouvelle classe pour l'élément

Tout d'abord, nous devons créer une nouvelle classe en CSS pour l'élément dont nous voulons modifier la position de la barre de défilement. Par exemple, si nous voulons changer la position de la barre de défilement d'un div avec la classe "scrollablediv", nous créerons la classe suivante en CSS -

.scrollable-div {
   CSS Code…….
}
::-webkit-scrollbar {
   width: 5px;
   background-color: #F5F5F5;
}

Cette classe ciblera la barre de défilement de l'élément "scrollable-div" et définira la largeur sur 5 pixels et la couleur d'arrière-plan sur gris clair.

Positionnez le pouce de la barre de défilement

Dans cette étape, notre cible est le pouce de la barre de défilement. Le pouce est la partie de la barre de défilement qui bouge lorsque l'utilisateur fait défiler. Nous ferons cela en ajoutant le code suivant à la classe CSS -

::-webkit-scrollbar-thumb {
   background-color: #000000;
}

Cela changera la couleur de votre pouce en noir.

Utilisez la propriété "position" pour changer la position de la barre de défilement

Dans la dernière étape, nous modifierons la position de la barre de défilement en utilisant la propriété "position". Par exemple, si nous voulions positionner la barre de défilement à gauche de l'élément "scrollable-div", nous utiliserions le code suivant -

.scrollable-div::-webkit-scrollbar {
   position: absolute;
   left: 0;
}

Cela positionnera la barre de défilement à gauche de l'élément "scrollable-div".

Exemple

Cet exemple place la barre de défilement à gauche de l'élément div.

<html>
   <title>The scroll bar on the left-hand side of the div element</title>
   <head>
      <style>
         body{
            text-align:center;
         } 
         .scrollable-div{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color:pink;
            margin:auto;
            padding:5px;
            transform: rotate(180deg);
         }
         .scrollable-div-inside {
            transform: rotate(-180deg);
         }
         .scrollable-div::-webkit-scrollbar {
            width: 5px; /* Set the width of the scrollbar */
            background-color: #F5F5F5; /* Set the background color of the scrollbar */
            position: absolute;
            right: 0; /* Position the scrollbar on the right of the element*/
         }
         .scrollable-div::-webkit-scrollbar-thumb {
            background-color: #000000; /* Set the color of the thumb */
         }
         ::-webkit-scrollbar-track {
            background: red;
            border-radius: 5px;
         }
      </style>
   </head> 
   <body>
      <h3>The scroll bar on the Left side of the div element</h3>
      <div class="scrollable-div">
         <div class="scrollable-div-inside">Lorem Ipsum is simply dummy text of the printing
            and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
      </div>
   </body>
</html>

Exemple

Cet exemple place la barre de défilement à droite de l'élément div.

<html>
   <title>The scroll bar on the right-hand side of the div element</title>
   <head>
      <style>
         body{
            text-align:center;
         } 
         .scrollable-div{
            height: 150px;
            width: 250px;
            overflow-x: auto;
            background-color:pink;
            margin:auto;
            padding:5px;
         }
         .scrollable-div::-webkit-scrollbar {
            width: 5px; /* Set the width of the scrollbar */
            background-color: #F5F5F5; /* Set the background color of the scrollbar */
            position: absolute;
            left: 0; /* Position the scrollbar on the left of the element */
         }
         .scrollable-div::-webkit-scrollbar-thumb {
            background-color: #000000; /* Set the color of the thumb */
         }
         ::-webkit-scrollbar-track {
            background: red;
            border-radius: 5px;
         }
      </style>
   </head>
   <body>
      <h3>The scroll bar on the right side of the div element</h3>
      <div class="scrollable-div">Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
         printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
         five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
   </body>
</html>

Conclusion

Changer la position de la barre de défilement à l'aide de CSS est un processus simple et peut être effectué en créant une nouvelle classe pour l'élément, en positionnant la barre de défilement et le curseur, puis en utilisant la propriété "position" pour changer la position de la barre de défilement. . Avec un peu de connaissances CSS et quelques expérimentations, nous pouvons créer un look personnalisé unique pour notre site 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!

css position

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment sélectionner le champ de saisie de texte à l'aide du sélecteur CSS ?Article suivant：Comment sélectionner le champ de saisie de texte à l'aide du sélecteur CSS ?

Articles Liés

Voir plus