CSS自定義滾動條

2022-09-07 19:51:14 字數 904 閱讀 5778

此改動僅適用於webkit瀏覽器和火狐,想寫ie的,另外再搜吧(蒐個毛線,正經人誰寫_)

通過自定義可以實現滾動條的樣式改動,支援懸浮放大等。關於滾動條的介紹,詳見::-webkit-scrollbar

當然,通過隱藏滾動條,使用標籤來模擬滾動條可以做到更好的效果。

這裡是scss寫的,道理就是這麼個道理,有需要的話,改成less、css之類的一樣用

// 這裡把element-ui的樣式過濾掉了

$bar-width: 6px;

$bar-height: 8px;

$bar-hover-width: .8rem;

$bar-hover-height: 1rem;

$track-bg: #0000;

$track-hover-bg: #0000;

$thumb-bg: rgba(223, 223, 223, .6);

$thumb-hover-bg: rgba(221, 221, 221, 1);

// webkit

// 滾動條

::-webkit-scrollbar

// 滾動軌道

::-webkit-scrollbar-track

// 用來拖動的那個東東

::-webkit-scrollbar-thumb

&:hover

&::-webkit-scrollbar-track

&::-webkit-scrollbar-thumb

} // 火狐

scrollbar-width: thin;

scrollbar-color: $thumb-bg $track-bg; // 前景色,背景色

&:hover

}

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 滾動條整體部分,可以設定寬...