Heim > Artikel > Web-Frontend > Wie ändere ich die Position der Bildlaufleiste mithilfe von CSS?

Wie ändere ich die Position der Bildlaufleiste mithilfe von CSS?

WBOYnach vorne: 2023-08-26 16:09:045022Durchsuche

Bildlaufleisten beziehen sich auf Elemente, die es Benutzern ermöglichen, durch Webinhalte zu scrollen. Es erscheint normalerweise als horizontaler oder vertikaler Balken an der Seite oder unten auf der Seite. Die Bildlaufleiste wird auch „Bildlaufleisten-Daumen“ genannt und ist der Teil der Bildlaufleiste, der sich bewegt, wenn der Benutzer nach oben und unten scrollt.

In diesem Artikel besprechen wir, wie man die Position von Bildlaufleisten mithilfe von CSS ändert. Wir werden die folgenden Themen behandeln -

Erstellen Sie eine neue Klasse für das Element
Bildlaufleisten und Daumen positionieren
Verwenden Sie die Eigenschaft „position“, um die Position der Bildlaufleiste zu ändern

Erstellen Sie eine neue Klasse für das Element

Zuerst müssen wir eine neue Klasse in CSS für das Element erstellen, bei dem wir die Position der Bildlaufleiste ändern möchten. Wenn wir beispielsweise die Position der Bildlaufleiste eines Div mit der Klasse „scrollablediv“ ändern möchten, erstellen wir die folgende Klasse in CSS –

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

Diese Klasse zielt auf die Bildlaufleiste des Elements „scrollable-div“ ab und legt die Breite auf 5 Pixel und die Hintergrundfarbe auf Hellgrau fest.

Positionieren Sie den Daumen der Bildlaufleiste

In diesem Schritt ist unser Ziel der Daumen der Bildlaufleiste. Der Daumen ist der Teil der Bildlaufleiste, der sich bewegt, wenn der Benutzer scrollt. Wir werden dies tun, indem wir der CSS-Klasse den folgenden Code hinzufügen -

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

Dadurch ändert sich die Farbe Ihres Daumens in Schwarz.

Verwenden Sie die Eigenschaft „position“, um die Position der Bildlaufleiste zu ändern

Im letzten Schritt ändern wir die Position der Bildlaufleiste mithilfe der Eigenschaft „position“. Wenn wir beispielsweise die Bildlaufleiste links vom „scrollable-div“-Element positionieren möchten, würden wir den folgenden Code verwenden –

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

Dadurch wird die Bildlaufleiste links vom „scrollable-div“-Element positioniert.

Beispiel

In diesem Beispiel wird die Bildlaufleiste links vom div-Element platziert.

<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>

Beispiel

In diesem Beispiel wird die Bildlaufleiste rechts neben dem div-Element platziert.

<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>

Fazit

Das Ändern der Position der Bildlaufleiste mithilfe von CSS ist ein einfacher Vorgang und kann durchgeführt werden, indem eine neue Klasse für das Element erstellt, die Bildlaufleiste und der Schieberegler positioniert und dann die Eigenschaft „position“ verwendet wird, um die Position der Bildlaufleiste zu ändern . Mit ein wenig CSS-Kenntnissen und etwas Experimentieren können wir ein einzigartiges, individuelles Erscheinungsbild für unsere Website erstellen.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Position der Bildlaufleiste mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css position

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie wähle ich ein Texteingabefeld mithilfe der CSS-Auswahl aus?Nächster Artikel：Wie wähle ich ein Texteingabefeld mithilfe der CSS-Auswahl aus?

In Verbindung stehende Artikel

Mehr sehen