vue實用demo滾動條美化

2021-10-08 23:28:59 字數 726 閱讀 3877

先看看滾動條美化前後的對比效果,美化後滾動條變苗條了,看著舒服一些

滾動條美化主要是通過css來調整樣式,主要涉及如下三個類:

-webkit-scrollbar:滾動條的寬度

-webkit-scrollbar-track:滾動條軌道

-webkit-scrollbar-thumb:滾動條滑塊

="scroller box-size"

>

}<

/div>

<

/template>

export

default},

methods:},

mounted()

}<

/script>

.box-size

.scroller:

:-webkit-scrollbar

.scroller:

:-webkit-scrollbar-track

.scroller:

:-webkit-scrollbar-thumb

<

/style>

滾動條美化

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

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...