滾動條美化

2021-08-28 13:08:43 字數 639 閱讀 5963

記一次滾動條美化

/*

定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸

*/::-webkit-scrollbar

/*定義滾動條軌道(track)和滑塊(thumb)

*/::-webkit-scrollbar-track,

::-webkit-scrollbar-thumb

/*定義滾動條頂部(左側)的按鈕塊

*//*

::-webkit-scrollbar-button:start

width: 10px;

height: 12px;

}定義滾動條底部(右側)的按鈕塊*!

::-webkit-scrollbar-button:end

::-webkit-scrollbar-button:start:hover

::-webkit-scrollbar-button:end

*/::-webkit-scrollbar-thumb

/*定義水平和垂直滾動條兩者的交界處(拐角)

*/::-webkit-scrollbar-corner ::-webkit-scrollbar-track:hover ::-webkit-scrollbar-thumb:hover

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

vue實用demo滾動條美化

先看看滾動條美化前後的對比效果,美化後滾動條變苗條了,看著舒服一些 滾動條美化主要是通過css來調整樣式,主要涉及如下三個類 webkit scrollbar 滾動條的寬度 webkit scrollbar track 滾動條軌道 webkit scrollbar thumb 滾動條滑塊 scrol...