css滾動條美化

2021-09-25 14:23:15 字數 787 閱讀 7934

.el-dialog__body

/* 設定滾動滑塊的寬高 */

.el-dialog__body::-webkit-scrollbar,

.el-dialog__body::-moz-scrollbar,

.el-dialog__body::-ms-scrollbar

/* 設定滾動滑塊的樣式 (還可以加 :hover偽類 如div:hover::-webkit-scrollbar-thumb) */

.el-dialog__body::-webkit-scrollbar-thumb,

.el-dialog__body::-moz-scrollbar-thumb,

.el-dialog__body::-ms-scrollbar-thumb

/* 設定滾動條的樣式 還可以設定邊框屬性 */

.el-dialog__body::-webkit-scrollbar-track,

.el-dialog__body::-moz-scrollbar-track,

.el-dialog__body::-ms-scrollbar-track

ps:好像加上-moz-和-ms-字首後樣式就不生效了,只加-webkit-字首是可以生效的

::-webkit-scrollbar 

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

對所有的滾動條設定統一樣式的話可以不需要指定元素類名,直接用偽類就行

CSS美化預設滾動條

在實際專案中,我們難免會遇到內容過多產生滾動條的時候,比如這樣的 預設情況下的滾動條不是很美觀,我們可以嘗試利用css來美化一下預設樣式。1 webkit scrollbar 滾動的區域 可以給滾動的區域設定width height background border等 2 webkit scrol...

滾動條美化

記一次滾動條美化 定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 track 和滑塊 thumb webkit scrollbar track,webkit scrollbar thumb 定義滾動條頂部 左側 的按鈕塊 webkit scrol...

css美化滾動條,以vue markdown為例

github vue markdown 下面是vue元件化中使用stylus語法 其中 是為了讓元件內也生效 vue元件化開發 設定滾動條的樣式 webkit scrollbar height 5px 設定橫向滾動條的高度 width 5px 設定縱向向滾動條寬頻 background color ...