css設定卷軸寬度的方法:首先使用【::-webkit-scrollbar】偽類選擇器設定卷軸樣式;然後在該偽類選擇器中通過width屬性設定卷軸寬度即可。
環境:
本文適用於所有品牌的電腦。
(學習視訊分享:)
方法思路如下:
在CSS中使用::-webkit-scrollbar偽類選擇器來設定卷軸樣式,並在此偽類選擇器中通過width屬性設定卷軸的寬度。
::-webkit-scrollbar CSS偽類選擇器影響了一個元素的卷軸的樣式。
你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的卷軸樣式:
::-webkit-scrollbar — 整個卷軸
::-webkit-scrollbar-button — 卷軸上的按鈕 (上下箭頭)
::-webkit-scrollbar-thumb — 卷軸上的捲動滾軸
::-webkit-scrollbar-track — 卷軸軌道
::-webkit-scrollbar-track-piece — 卷軸沒有滾軸的軌道部分
::-webkit-scrollbar-corner — 當同時有垂直卷軸和水平卷軸時交匯的部分
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)
實現程式碼:
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* Demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */}/* Add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; }
相關推薦:
以上就是css怎麼設定卷軸寬度的詳細內容,更多請關注TW511.COM其它相關文章!