如何使用CSS改變捲軸的位置？
- WBOY轉載
- 2023-08-26 16:09:045020瀏覽
捲軸是指允許使用者捲動瀏覽網頁內容的元素。它通常顯示為頁面側面或底部的水平或垂直條。捲軸也稱為“滾動條拇指”，它是當使用者上下滾動時滾動條移動的部分。
在本文中，我們將討論如何使用 CSS 來變更捲軸的位置。我們將涵蓋以下主題 -
為元素建立一個新類別
定位捲軸和拇指
#使用「position」屬性變更捲軸的位置
#為元素建立一個新類別
首先，我們需要在 CSS 中為要更改捲軸位置的元素建立一個新類別。例如，如果我們想要更改具有「scrollablediv」類別的 div 的捲軸位置，我們將在 CSS 中建立以下類別 -
.scrollable-div {
CSS Code…….
}
::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
此類將以「scrollable-div」元素的捲軸為目標，並將寬度設為 5 像素，背景顏色設定為淺灰色。
定位捲軸的拇指
在這一步中，我們的目標是滾動條的拇指。拇指是滾動條中當使用者滾動時移動的部分。我們將透過將以下程式碼新增至 CSS 類別來做到這一點 -
::-webkit-scrollbar-thumb {
background-color: #000000;
}
這會將拇指的顏色變更為黑色。
使用「position」屬性變更捲軸的位置
在最後一步中，我們將使用「position」屬性來變更捲軸的位置。例如，如果我們想要將捲軸定位在「scrollable-div」元素的左側，我們將使用以下程式碼 -
.scrollable-div::-webkit-scrollbar {
position: absolute;
left: 0;
}
這會將捲軸定位在「scrollable-div」元素的左側。
範例
此範例將捲軸放在 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>
範例
此範例將捲軸放在 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>
結論
使用 CSS 更改捲軸的位置是一個簡單的過程，可以透過為元素建立新類別、定位捲軸和滑桿，然後使用「position」屬性來變更捲軸的位置來完成。透過一點 CSS 知識和一些實驗，我們可以為網站創建獨特的自訂外觀。
以上是如何使用CSS改變捲軸的位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除