跟大家講解下有關css怎么設置滾動條寬度，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css怎么設置滾動條寬度，小編也收集到了有關css怎么設置滾動條寬度的相關資料，希望大家看到了會喜歡。

css設置滾動條寬度的方法：首先使用【::-webkit-scrollbar】偽類選擇器設置滾動條樣式；然后在該偽類選擇器中通過width屬性設置滾動條寬度即可。

環境：

本文適用于所有品牌的電腦。

（學習視頻分享：css視頻教程）

方法思路如下：

在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; } .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; }

相關推薦：CSS教程

以上就是css怎么設置滾動條寬度的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網