如何在 CSS 中自訂捲軸的高度？-css教學-PHP中文網

如何在 CSS 中自訂捲軸的高度？

Patricia Arquette

發布： 2024-11-02 06:01:02

原創

320 人瀏覽過

How can I customize the height of a scrollbar in CSS?

自訂捲軸高度

為了修改捲軸的高度，有必要了解滾動條的結構組成。捲軸由多個元素組成，包括：

滾動條拇指：表示使用者操縱滾動的可拖曳區域。
捲軸軌跡： 拇指移動的背景區域。

要達到所提供影像中顯示的所需效果，需要：

定義起點和終點對於滾動條拇指，確保它僅在特定區域內滾動。
建立替代滾動軌道，取代預設軌道。

這裡是一個範例程式碼片段，示範如何實現此目的：

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

登入後複製

此程式碼片段建立一個高度為50% 的自訂捲軸，如所提供的圖像中所指定。它透過調整滾動條拇指的大小並創建一個假滾動軌道來取代原始滾動軌道來實現這一點。

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