CSS 捲軸樣式
CSS 捲軸樣式模組定義了你可以用於捲軸視覺樣式設計的屬性。你可以根據需要自定義捲軸的寬度。你還可以自定義捲軸軌道(即捲軸的背景)的顏色,以及捲軸滑塊(即捲軸的可拖動手柄)的顏色。
捲軸樣式實際應用
此示例定義了一個薄捲軸,帶有紅色滑塊和橙色軌道。要檢視滑塊,你需要滾動文字。捲軸可見後,將滑鼠懸停在其上以檢視軌道。
css
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
注意:自定義捲軸時,請確保滑塊和軌道與周圍背景有足夠的對比度。此外,請確保捲軸的點選區域足夠大,以方便使用觸控輸入的使用者。
參考
CSS 屬性
相關概念
overflow-blockCSS 屬性overflow-inlineCSS 屬性overflow-xCSS 屬性overflow-yCSS 屬性overflowCSS 簡寫屬性overflow-clip-marginCSS 屬性scrollbar-gutterCSS 屬性scroll-behaviorCSS 屬性scroll-marginCSS 簡寫屬性scroll-paddingCSS 簡寫屬性scroll-snap-alignCSS 屬性scroll-snap-stopCSS 屬性scroll-snap-typeCSS 屬性::-webkit-scrollbar偽元素- 滾動容器 術語表
scrollbarARIA 角色
規範
| 規範 |
|---|
| CSS 捲軸樣式模組級別 1 |