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

2021-10-19 19:41:55 字數 873 閱讀 2287

github:vue-markdown

下面是vue元件化中使用stylus語法

其中>>>是為了讓元件內也生效

vue元件化開發

>>> *

/* 設定滾動條的樣式 */

::-webkit-scrollbar

height 5px /*設定橫向滾動條的高度*/

width 5px /*設定縱向向滾動條寬頻*/

background-color

:rgba

(0, 0, 0, .3)

::-webkit-scrollbar-track

display none

border-radius 10px

/* 滾動條滑塊樣式 */

::-webkit-scrollbar-thumb

background-color hsla

(0, 0%, 100%, .5)

border-radius 10px

::-webkit-scrollbar-track-piece

border-radius 10px

單純css的**如下

>

/* 設定滾動條的樣式 */

*::-webkit-scrollbar

*::-webkit-scrollbar-track

/* 滾動條滑塊樣式 */

*::-webkit-scrollbar-thumb

*::-webkit-scrollbar-track-piece

style

>

css滾動條美化

el dialog body 設定滾動滑塊的寬高 el dialog body webkit scrollbar,el dialog body moz scrollbar,el dialog body ms scrollbar 設定滾動滑塊的樣式 還可以加 hover偽類 如div hover we...

CSS美化預設滾動條

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

滾動條美化

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