如何在Web開發中建立高度降低的自訂捲軸？

如何調整滾動條高度

在這種情況下，我們正在討論自訂滾動條的外觀，特別是透過調整滾動條的高度。為此，我們需要了解滾動條的結構，如下所示：

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

目標有兩個：修改滾動條滑塊(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>

此程式碼創建一個假滾動條，它看起來比實際滾動條短，給人一種高度調整的錯覺。 ::-webkit-scrollbar-track 元素用於隱藏原始捲軸，而 ::after 偽元素建立假捲軸。 ::-webkit-scrollbar-thumb 元素的樣式類似較短的捲軸拇指。透過調整 ::-webkit-scrollbar-track-piece 元素的 margin-top 和 margin-bottom 屬性，可以修改捲軸滑桿的起點和終點。

這段程式碼將有效縮短捲軸的外觀，提供客製化的視覺體驗。

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