一紙忘憂

CSS 實現自訂瀏覽器捲軸樣式

4,345 0

今天訪問憧憬部落格時，發現他的網站瀏覽器預設側邊捲軸被修改成了自訂樣式。後來上網查詢了一下，得知該樣式可以透過 CSS 來設計。於是我自己搗鼓了一下，順便把 CSS 程式碼借了過來，本網站已經用上了，效果大家可以自己看看。

注意：

該樣式僅限於 Chromium 核心的瀏覽器，比如谷歌瀏覽器、QQ 瀏覽器、360 瀏覽器等。非 Chromium 核心的瀏覽器則不會顯示樣式，例如火狐瀏覽器、歐朋瀏覽器等。

CSS 程式碼

屬性說明

Plain Text
::-webkit-scrollbar               /* 滾動條整體部分 */::-webkit-scrollbar-button        /* 滾動條兩端的按鈕 */::-webkit-scrollbar-track         /* 外層軌道 */::-webkit-scrollbar-track-piece   /* 內層軌道滾動條中間部分 */::-webkit-scrollbar-thumb         /* 滾動條裡面可以拖動的部分 */::-webkit-scrollbar-corner        /* 邊角 */::-webkit-resizer                 /* 定義右下角拖動塊的樣式 */

範例程式碼

下面是本網站使用的 CSS 樣式，大家可以根據需要自行修改

CSS
/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   height: 50px;
   outline-offset: -2px;
   outline: 2px solid #cddc39;
   -webkit-border-radius: 4px;
   border: 2px solid #fff;
}

/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
   background-color: #00bcd4;
   height: 50px;
   -webkit-border-radius: 4px;
}

/* 滚动条宽度与高度 */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 0;
}

評論

(0)

暫無評論，來說兩句吧

發佈評論