控制捲軸大小
要修改滾動條的高度，需要了解其結構。參考下圖來視覺化捲軸的組件：
[捲軸結構圖]
要更改大小，我們將重點放在兩個方面：
建立自訂捲軸
考慮以下程式碼：
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>使用套用於包裝元素捲軸的 CSS 屬性自訂捲軸的寬度、背景和縮圖顏色。
加入邊距到捲軸的軌道件以控制滾動滑桿的起點和終點。 透過實現這些更改，您可以修改捲軸的高度以滿足您的設計要求。以上是如何使用 CSS 和 HTML 自訂捲軸的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
