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