前端實現(xiàn)瀏覽器自定義滾動條寫法實例

更新時間：2024年06月26日 10:09:20 作者：崽崽的谷雨

自定義滾動條最早是IE玩出來的,但是后來,不知道為什么IE把這個有意思的功能廢棄了,下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)瀏覽器自定義滾動條寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

最近有個項目，產(chǎn)品覺得瀏覽器默認(rèn)滾動條太丑了。想美化一下，比如自定義顏色，加上圓角，寬高都要更改一下。我查了資料和文檔總結(jié)了一下寫法，特此記錄以便之后使用。

瀏覽器滾動條api 總結(jié)：

標(biāo)準(zhǔn)api：

scrollbar-width

scrollbar-width 屬性允許開發(fā)者在元素顯示滾動條時設(shè)置滾動條的最大寬度。

語法:

/* 關(guān)鍵字值 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* 全局值 */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;

取值:

將滾動條的寬度定義為數(shù)值寬度或者預(yù)定義寬度，當(dāng)被定義為預(yù)定義寬度時，則必須為下列值之一：

auto 系統(tǒng)默認(rèn)的滾動條寬度。
thin 系統(tǒng)提供的瘦滾動條寬度，或者比默認(rèn)滾動條寬度更窄的寬度。
none 不顯示滾動條，但是該元素依然可以滾動。

備注：用戶代理必須將應(yīng)用于根元素的任何 scrollbar-width 值應(yīng)用于視口。

兼容性：

需要注意的是各個瀏覽器寬度不一樣設(shè)置這個不能保證各個瀏覽器都一致?。?！更多請參考：
MDN scrollbar-width

scrollbar-color

實驗性: 這是一項實驗性技術(shù)

在將其用于生產(chǎn)之前，請仔細(xì)檢查瀏覽器兼容性表格。

scrollbar-color該CSS屬性設(shè)置滾動條軌道和拇指的顏色

**track（軌道）**是指滾動條，其一般是固定的而不管滾動位置的背景。

thumb（拇指）是指滾動條通常漂浮在軌道的頂部上的移動部分。

語法：

/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

取值：

定義滾動條的顏色。

值描述
auto 在沒有任何其他相關(guān)滾動條顏色屬性的情況下，滾動條的軌道部分默認(rèn)平臺渲染。
dark 顯示黑色滾動條，可以是平臺提供的滾動條的深色變體，也可以是帶深色的自定義滾動條。
light 顯示一個輕量滾動條，可以是平臺提供的滾動條的輕微變體，也可以是帶有淺色的自定義滾動條。
將第一種顏色應(yīng)用于滾動條拇指，第二種顏色應(yīng)用于滾動條軌道。

兼容性：

MDN scrollbar-color

標(biāo)準(zhǔn)api：

::-webkit-scrollbar

非標(biāo)準(zhǔn): 該特性是非標(biāo)準(zhǔn)的，請盡量不要在生產(chǎn)環(huán)境中使用它！

::-webkit-scrollbar CSS 偽類元素會影響設(shè)置了 overflow:scroll; 的元素的滾動條樣式。

備注：如果沒有設(shè)置 overflow:scroll;，元素的滾動條將不會顯示。

備注： ::-webkit-scrollbar 僅在基于 Blink 或 WebKit 的瀏覽器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的瀏覽器，以及其他基于 WebKit 的瀏覽器）上可用。滾動條樣式的標(biāo)準(zhǔn)方法可用于 scrollbar-color 和 scrollbar-width。

CSS 滾動條選擇器

你可以使用以下偽元素選擇器去修改基于 webkit 的瀏覽器的滾動條樣式：

::-webkit-scrollbar——整個滾動條。
::-webkit-scrollbar-button——滾動條上的按鈕（上下箭頭）。
::-webkit-scrollbar-thumb——滾動條上的滾動滑塊。
::-webkit-scrollbar-track——滾動條軌道。
::-webkit-scrollbar-track-piece——滾動條沒有滑塊的軌道部分。
::-webkit-scrollbar-corner——當(dāng)同時有垂直滾動條和水平滾動條時交匯的部分。通常是瀏覽器窗口的右下角。
::-webkit-resizer——出現(xiàn)在某些元素底角的可拖動調(diào)整大小的滑塊。

具體api請看：CSS 滾動條選擇器:
MDN webkit-scrollbar

完整的偽類元素列表：

下面的偽類已經(jīng)被引入，并且可以應(yīng)用于偽元素。

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:horizontal -horizontal偽類適用于任何具有水平方向的滾動條。

:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
:vertical -vertical偽類適用于任何垂直方向的滾動條。

:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view's position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:decrement -遞減偽類應(yīng)用于按鈕和軌道片段。它指示按鈕或軌跡片段在使用時是否將遞減視圖的位置（例如，在垂直滾動條上向上，在水平滾動條上向左）。

:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view's position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
:increment -遞增偽類應(yīng)用于按鈕和軌跡片段。它指示按鈕或軌跡片段在使用時是否會增加視圖的位置（例如，在垂直滾動條上向下，在水平滾動條上向右）。

:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:start -start偽類應(yīng)用于按鈕和軌跡片段。它指示對象是否放置在拇指之前。

:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
:end -end偽類應(yīng)用于按鈕和軌跡片段。它指示對象是否放置在拇指之后。

:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
:double-button -double-button偽類應(yīng)用于按鈕和軌跡片段。它用于檢測一個按鈕是否是位于滾動條同一端的一對按鈕的一部分。對于軌道件，它指示軌道件是否鄰接一對按鈕。

:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
:single-button -單按鈕偽類應(yīng)用于按鈕和軌跡片段。它用于檢測按鈕是否單獨位于滾動條的末尾。對于軌跡片段，它指示軌跡片段是否鄰接單個按鈕。

:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
:no-button -指向軌道段并指示軌道段是否運(yùn)行到滾動條的邊緣，即，軌道的那一端沒有按鈕。

:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
:corner-present -指向所有滾動條片段，并指示是否存在滾動條角。

:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)
:window-inactive -指向所有滾動條，并指示包含滾動條的窗口當(dāng)前是否處于活動狀態(tài)。(In最近的nightlies，這個偽類現(xiàn)在也適用于：：selection。我們計劃將其擴(kuò)展到任何內(nèi)容，并將其作為一個新的標(biāo)準(zhǔn)偽類。

In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.
此外，：enabled、：disabled、：hover和：active偽類也可以處理滾動條。

The display property can be set to none in order to hide specific pieces.
可以將display屬性設(shè)置為none以隱藏特定的片段。

Margins are supported along the axis of the scrollbar. They can be negative (so that the track can for example be inflated to cover the buttons partially).
沿滾動條的軸沿著支持邊距。它們可以是負(fù)的（使得軌道可以例如被充氣以部分地覆蓋按鈕）。

The linked example above provides a very complex scrollbar that has all of the OS X scrollbar behaviors (double buttons, an inactive look, track overlapping the buttons, etc.) as well as many of the Windows Vista scrollbar behaviors (hover effects, unique pressed looks above and below the track, etc.).
上面的鏈接示例提供了一個非常復(fù)雜的滾動條，它具有OS X滾動條的所有行為（雙按鈕、非活動外觀、軌道與按鈕重疊等）。以及許多Windows Vista滾動條行為（懸停效果，軌道上方和下方獨特的按壓外觀等）。

Styling Scrollbars 設(shè)置滾動條樣式

實現(xiàn)代碼：

通過官方的MDN文檔可知:

標(biāo)準(zhǔn)的api 兼容性很好，但是低版本瀏覽器依然不支持。功能比較單一只能設(shè)置 width（寬度）和 color（顏色）。而且各個瀏覽器的滾動條樣式也不一樣。

非標(biāo)準(zhǔn)的api 兼容性沒那么好（僅在基于 Blink 或 WebKit 的瀏覽器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的瀏覽器，以及其他基于 WebKit 的瀏覽器），但很靈活，可以自定義想要的滾動條。

綜上自定義滾動條沒有完美的方案，即使設(shè)置了樣式，有的瀏覽器和低版本瀏覽器可能都不會生效。所以只能保證高版本瀏覽器用戶的體驗，低版本的瀏覽器可能還是默認(rèn)的樣式?。?！

::-webkit-scrollbar 偽元素和 scrollbar-width CSS屬性的應(yīng)用中，實際上 scrollbar-width 的優(yōu)先級更高，會覆蓋 ::-webkit-scrollbar 的設(shè)置。這意味著如果您同時設(shè)置了這兩個樣式，scrollbar-width 屬性會首先生效，而不是 ::-webkit-scrollbar。

標(biāo)準(zhǔn)寫法：

以chrome 版本 122.0.6261.131（正式版本）（64 位）為例子：

html{
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2);
  }

默認(rèn)是這樣的：

與默認(rèn)的只是顏色和寬度的區(qū)別。

非標(biāo)準(zhǔn)寫法：

html{
 /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

效果：ka

在這里插入圖片描述

可以看到上面的button 箭頭沒了，加上了圓角和 hover、active效果。

html{
  /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }
}

其他樣式

/* 滾動條軌道樣式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 縱向滾動條樣式 */
*::-webkit-scrollbar-vertical {
  width: 10px;
}
/* 橫向滾動條樣式 */
*::-webkit-scrollbar-horizontal {
  height: 10px;
}
/* 縱向滾動條軌道樣式 */
*::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 縱向滾動條滑塊樣式 */
*::-webkit-scrollbar-thumb {
  background: #888;
}

為了支持更多瀏覽器可以加上前綴：

不同的瀏覽器內(nèi)核需要使用不同的CSS前綴來實現(xiàn)特定的樣式，以確保在不同的瀏覽器中都能正確顯示。以下是一些常見的瀏覽器內(nèi)核和它們對應(yīng)的CSS前綴：


WebKit（Chrome、Safari等）：

-webkit-

Gecko（Firefox）：

-moz-



Trident（Internet Explorer）：

-ms-



Blink（Chrome等）：

-webkit- （部分屬性也可使用WebKit前綴）


Presto（Opera 舊版本）：

-o-

完整寫法：

html {

  //webkit內(nèi)核
  /*滾動條寬高 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-webkit-scrollbar-thumb:active {
    background-color: #666666;
  }


  //Firefox

  /*滾動條寬高 */
  ::-moz-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-moz-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-moz-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-moz-scrollbar-thumb:active {
    background-color: #666666;
  }

  //ie Internet Explorer
  /*滾動條寬高 */
  ::-ms-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-ms-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-ms-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-ms-scrollbar-thumb:active {
    background-color: #666666;
  }

  //Opera 舊版本
  /*滾動條寬高 */
  ::-o-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* 滾動條上的滾動滑塊。樣式 */
  ::-o-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 鼠標(biāo)懸停時，設(shè)置滑塊的背景顏色為深灰色 */
  ::-o-scrollbar-thumb:hover {
    background-color: #999999;
  }

  /* 鼠標(biāo)按下時，設(shè)置滑塊的背景顏色為灰色 */
  ::-o-scrollbar-thumb:active {
    background-color: #666666;
  }
}