知識整理 利用CSS自定義滾動條樣式

2021-08-19 11:47:29 字數 456 閱讀 6194

一。某些情況下瀏覽器自帶的滾動條樣式不能滿足我們的需求,這時需要我們自定義滾動條的樣式,經過網上資料的收集,發現了自定義瀏覽器樣式的**,但僅限webkit核心的瀏覽器,其他瀏覽器暫不相容。

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

#scroll::-webkit-scrollbar

/*定義滾動條軌道 內陰影+圓角*/

#scroll::-webkit-scrollbar-track

/*定義滑塊 內陰影+圓角*/

#scroll::-webkit-scrollbar-thumb

經過上述**的設定,我將滾動條樣式改為下圖,大家可以根據自己的需求自行設定。

css自定義滾動條

1 在谷歌瀏覽器和safari中可直接設定,如果想單獨對某個盒子新增,直接在偽類前面加上選擇器即可 滾動條的軌道 滾動條的滑塊按鈕 webkit scrollbar track,webkit scrollbar thumb 滾動條的上下兩端的按鈕 webkit scrollbar button we...

CSS自定義滾動條

乙個類名為parent的容器包裹了一些lorem。lorem ipsum dolor sit amet consectetur adipisicing elit.iusto,delectus libero cupiditate sapiente excepturi,ea hic,exercitati...

CSS 自定義滾動條

瀏覽器允許自定義滾動條,ie也可以改變預設的樣色,不過效果不明顯。常見谷歌瀏覽器滾動條修改 webkit scrollbar webkit scrollbar thumb webkit scrollbar track ie自定義滾動條顏色 webkit scrollbar 滾動條整體部分,可以設定寬...