在 Chrome、Edge 和 Safari 中設(shè)置滾動條樣式

目前，Chrome、Edge 和 Safari 的樣式滾動條可以使用供應(yīng)商前綴 pseudo-element -webkit-scrollbar。

這是一個使用::-webkit-scrollbar、::-webkit-scrollbar-track和::webkit-scrollbar-thumb偽元素的示例：

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

這是使用這些 CSS 規(guī)則生成的滾動條的屏幕截圖：

此代碼適用于最新版本的 Chrome、Edge 和 Safari。

Firefox 中的滾動條樣式

目前，新的CSS Scrollbars可以為 Firefox 設(shè)置樣式滾動條。

這是一個使用scrollbar-width和scrollbar-color屬性的示例：

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

這是使用這些 CSS 規(guī)則生成的滾動條的屏幕截圖：

該規(guī)范與-webkit-scrollbar控制滾動條顏色的規(guī)范有一些共同點。但是，目前不支持修改“track thumb”的填充和圓度。

構(gòu)建面向未來的滾動條樣式

您可以以同時支持-webkit-scrollbar和CSS Scrollbars規(guī)范的方式編寫 CSS。

這是一個使用scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track,的示例::webkit-scrollbar-thumb：

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink 和 WebKit 瀏覽器將忽略它們無法識別的規(guī)則并應(yīng)用-webkit-scrollbar規(guī)則。Firefox 瀏覽器將忽略它們無法識別的規(guī)則并應(yīng)用CSS Scrollbars規(guī)則。一旦 Blink 和 WebKit 瀏覽器完全棄用該-webkit-scrollbar規(guī)范，它們將優(yōu)雅地回退到新CSS Scrollbars規(guī)范。