自訂捲軸高度
為了修改捲軸的高度,有必要了解滾動條的結構組成。捲軸由多個元素組成,包括:
要達到所提供影像中顯示的所需效果,需要:
這裡是一個範例程式碼片段,示範如何實現此目的:
<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中文網其他相關文章!