卡卡網(wǎng)

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

它在 Chrome、Safari 和 Firefox 中相當(dāng)一致。

效果圖

demodownload

實(shí)例介紹

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

HTML代碼

<p>演示內(nèi)容</p>
<p>演示內(nèi)容</p>
<p>演示內(nèi)容</p>

本實(shí)例介紹自定義滾動條跨瀏覽器演示，與HTML代碼無太多關(guān)系，只需網(wǎng)頁內(nèi)容超過1個屏幕的高度，就能看到滾動條的出現(xiàn)。

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

本實(shí)例是純CSS實(shí)現(xiàn)，無需JavaScript編程。

關(guān)于 macOS 上的 Firefox 的注意事項

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: css  滾動條  scrollbar