如何使用 CSS 和 HTML 自訂捲軸的高度？

自訂捲軸高度

控制捲軸大小

要修改滾動條的高度，需要了解其結構。參考下圖來視覺化捲軸的組件：

[捲軸結構圖]

要更改大小，我們將重點放在兩個方面：

• 控制滾動條滑桿(5) 開始和停止滾動的位置
• 模擬假滾動軌道而不是使用預設滾動軌道(3)

建立自訂捲軸

考慮以下程式碼：

CSS：

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

HTML：

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

HTML：

• 使用頁面元素的after 偽元素定義假滾動軌道。

使用套用於包裝元素捲軸的 CSS 屬性自訂捲軸的寬度、背景和縮圖顏色。

加入邊距到捲軸的軌道件以控制滾動滑桿的起點和終點。 透過實現這些更改，您可以修改捲軸的高度以滿足您的設計要求。

以上是如何使用 CSS 和 HTML 自訂捲軸的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！