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

自訂捲軸高度

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

理解滾動條結構

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

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

調整捲軸高度

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

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

程式碼實作

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

<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中文網其他相關文章！