卡卡網(wǎng)

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

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

效果圖

demodownload

實(shí)例介紹

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

HTML代碼

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

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

CSS代碼

CSS代碼并不多，主要是使用了3個(gè)滾動(dòng)條屬性：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 的注意事項(xiàng)

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

總結(jié)

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

相關(guān)文章

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

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