如何在 CSS 中自訂捲軸高度以建立具有視覺吸引力且實用的網頁？-css教學-PHP中文網

如何在 CSS 中自訂捲軸高度以建立具有視覺吸引力且實用的網頁？

Linda Hamilton

發布： 2024-10-31 07:14:30

原創

1048 人瀏覽過

How can I customize scrollbar height in CSS to create a visually appealing and functional web page?

自訂捲軸高度

控制捲軸的高度是增強網頁視覺吸引力和功能性的有用技術。本文探討了一種自訂捲軸高度的方法，類似於圖中提供的範例。

理解滾動條結構

首先，了解滾動條的結構非常重要。它由幾個元素組成：

捲軸：捲軸的主容器。
捲軸按鈕：頂部的箭頭
捲軸軌道：滾動條滑桿移動的垂直或水平空間。
滾動條軌道片段：捲軸的片段
滾動條拇指： 指示內容內位置的可移動元素。
捲軸角： 捲軸與捲軸的交集
Resizer： 允許調整捲軸大小的可選元素。

調整捲軸高度

要達到所需的捲軸高度，您必須：

設定滾動條拇指的起點和終點。 這決定拇指開始和停止滾動的位置。
模擬滾動軌道。 即使實際軌道被分成兩部分，滾動軌道也會提供連續軌道的錯覺。

程式碼實作

以下程式碼片段示範如何實作這些調整：

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

登入後複製

此程式碼建立一個高度為5px 的滾動條，並且看起來有一個連續的軌道。模擬軌道是使用 ::after 偽元素創建的，而寬度和軌道背景是使用 CSS 屬性調整的。

以上是如何在 CSS 中自訂捲軸高度以建立具有視覺吸引力且實用的網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！