本文介紹純CSS自定義滾動條的跨瀏覽器演示。

它在 Chrome、Safari 和 Firefox 中相當一致。

效果圖

demodownload

實例介紹

純CSS自定義滾動條，它是跨瀏覽器的，它在 Chrome、Safari 和 Firefox 中表現一致。

HTML代碼

<p>演示內容</p>
<p>演示內容</p>
<p>演示內容</p>

本實例介紹自定義滾動條跨瀏覽器演示，與HTML代碼無太多關系，只需網頁內容超過1個屏幕的高度，就能看到滾動條的出現。

CSS代碼

CSS代碼并不多，主要是使用了3個滾動條屬性：scrollbar、scrollbar-track、scrollbar-thumb。

body::-webkit-scrollbar {
  width: 11px;
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

JavaScript

本實例是純CSS實現，無需JavaScript編程。

關于 macOS 上的 Firefox 的注意事項

scrollbar-width屬性無論如何都會起作用，但只有當你在“常規(guī)系統偏好設置”中選中“顯示滾動條：始終”時，scrollbar-color屬性才起作用。

總結

本文介紹了純CSS自定義滾動條的跨瀏覽器演示，它并且用不到JavaScript編程。

相關文章

• 在 Edge, IE 10/11 中隱藏滾動條
• [3個示例]默認隱藏滾動條，鼠標懸停時顯示
• [15個實例]CSS自定義滾動條的樣式：圓角/平角/寬度/顏色等
• 如何用CSS自定義滾動條寬度及軌道背景顏色
• 4個純CSS自定義的炫酷醒目的滾動條
• 6個純CSS自定義的簡單而優(yōu)雅的滾動條樣式

標簽: css  滾動條  scrollbar