當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

如何自定义CSS滚动条的样式？

發(fā)布時(shí)間：2023/12/2 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了如何自定义CSS滚动条的样式？小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

歡迎大家前往騰訊云社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由前端林子發(fā)表

本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中，自定義一個(gè)橫向以及一個(gè)縱向的滾動(dòng)條。

0.需求

有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動(dòng)條樣式，因?yàn)椴粔蚨ㄖ苹兔烙^。那么如何自定義滾動(dòng)條的樣式呢？下面一起來看看吧。

1 基礎(chǔ)知識(shí)

1.1 Webkit內(nèi)核的css滾動(dòng)條選擇器

::-webkit-scrollbar CSS偽類選擇器影響了一個(gè)元素的滾動(dòng)條的樣式

屬性：

::-webkit-scrollbar — 整個(gè)滾動(dòng)條

::-webkit-scrollbar-track — 滾動(dòng)條軌道

::-webkit-scrollbar-thumb — 滾動(dòng)條上的滾動(dòng)滑塊

::-webkit-scrollbar-button — 滾動(dòng)條上的按鈕 (上下箭頭)

::-webkit-scrollbar-track-piece — 滾動(dòng)條沒有滑塊的軌道部分

::-webkit-scrollbar-corner — 邊角，即當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分

::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動(dòng)按鈕)

注意：

(1)瀏覽器的支持情況：

::-webkit-scrollbar 僅僅在支持Webkit的瀏覽器 (Chrome, Safari)可以使用。

(2)可設(shè)置豎直/水平方向的滾動(dòng)條

可以設(shè)置水平方向的滾動(dòng)條(:horizontal)，不加默認(rèn)是豎直方向(:vertical)。

(3)滾動(dòng)條上的按鈕（:decrement、:increment）

可以設(shè)置圖片，這點(diǎn)會(huì)在下面demo中展示。

1.2 IE自定義滾動(dòng)條樣式

可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。這里我只列舉了部分樣式，諸如scrollbar-3dlight-color、scrollbar-highlight-color等樣式試了下沒有效果，這里不再列出：

scrollbar-arrow-color — 滾動(dòng)條三角箭頭的顏色 scrollbar-face-color — 滾動(dòng)條上滾動(dòng)滑塊顏色

scrollbar-track-color— 滾動(dòng)條軌道、按鈕背景的顏色 scrollbar-shadow-color— 滾動(dòng)框上滑塊邊框的顏色

2.demo快速上手

2.1 Webkit內(nèi)核的瀏覽器自定義滾動(dòng)條樣式 (chrome, safari)

如果覺得上述說明有些抽象，可以直接在瀏覽器中打開demo，結(jié)合demo中的注釋來理解各個(gè)屬性的意義。圖中我對(duì)其中的一些屬性做了標(biāo)注，滾動(dòng)條外層軌道屬性并未在圖中標(biāo)注，可打開chrome瀏覽器控制臺(tái)查看屬性：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>scrollbar的demo--lynnshen</title><style type="text/css">* {margin: 0;padding: 0;}.scolltable {width: 500px;height: 300px;border: 1px solid black;/*實(shí)現(xiàn)水平垂直居中*/position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -150px;overflow: scroll;}.content {/*要設(shè)的比.scolltable更寬一些*/width: 600px;}/*整個(gè)滾動(dòng)條*/::-webkit-scrollbar {width: 24px;background-color: transparent;}/*水平的整個(gè)滾動(dòng)條*/::-webkit-scrollbar:horizontal {height: 24px;background-color: transparent;}/*滾動(dòng)條軌道*/::-webkit-scrollbar-track {background-color: #f6f8fc;border-right: 1px solid #f1f5fa;border: 1px solid #f1f5fa;;}/*豎直的滑塊*/::-webkit-scrollbar-thumb {background-color: rgba(220, 228, 243, 1);border-radius: 0px;border-top: 1px solid #edf2f9;border-bottom: 1px solid #edf2f9;border-left: 1px solid #f1f5fa;}/*水平的滑塊*/::-webkit-scrollbar-thumb:horizontal {/* background-color: rgba(220, 228, 243, 1); */border-radius: 0px;border-top: 1px solid #edf2f9;/* border-right: 1px solid #f1f5fa;border-left: 1px solid #f1f5fa; */}/*滾動(dòng)條上的按鈕--豎直滾動(dòng)條向上*/::-webkit-scrollbar-button:decrement {border-bottom: 1px solid #edf2f9;height: 26px;background: url("./images/scroll_up.png") 7px 9px no-repeat;border-right: 1px solid #f1f5fa;border-left: 1px solid #f1f5fa;}/*滾動(dòng)條上的按鈕--豎直滾動(dòng)條向下*/::-webkit-scrollbar-button:increment {border-top: 1px solid #edf2f9;height: 26px;background: url("./images/scroll_down.png") 7px 10px no-repeat;border-right: 1px solid #f1f5fa;border-left: 1px solid #f1f5fa;border-bottom: 1px solid #f1f5fa;}/*滾動(dòng)條上的按鈕--水平滾動(dòng)條向左*/::-webkit-scrollbar-button:horizontal:decrement {border-top: 1px solid #edf2f9;width: 26px;background: url("./images/scroll_left.png") 9px 7px no-repeat;border-top: 1px solid #f1f5fa;border-bottom: 1px solid #f1f5fa;border-right:1px solid #f1f5fa;}/*滾動(dòng)條上的按鈕--水平滾動(dòng)條向右*/::-webkit-scrollbar-button:horizontal:increment {border-top: 1px solid #edf2f9;width: 25px;background: url("./images/scroll_right.png") 10px 7px no-repeat;border-left:1px solid #f1f5fa;}/*邊角*/::-webkit-scrollbar-corner{border:1px solid #dce4f3;}</style></head><body><div class="scolltable"><div class="content">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div></div> </body></html>

實(shí)現(xiàn)效果：

WebKit內(nèi)核的瀏覽器

說明：

(1)滾動(dòng)條兩端的按鈕使用的圖片，四個(gè)角分別使用了四張圖片;

(2).scolltable實(shí)現(xiàn)了水平垂直居中的效果，具體方法是：使用絕對(duì)對(duì)位，將元素的定點(diǎn)定位到body的中心。然后使用負(fù)margin（即元素寬高的一半）將其拉回到body的中心。

2.2 IE自定義滾動(dòng)條樣式

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>scrollbar for IE--lynnshen</title><style type="text/css">* {margin: 0;padding: 0;}.scolltable {width: 500px;height: 300px;border: 1px solid black;/*實(shí)現(xiàn)水平垂直居中*/position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -150px;overflow: scroll;scrollbar-face-color:greenyellow;scrollbar-arrow-color:goldenrod;scrollbar-shadow-color:red;scrollbar-track-color:pink;}.content {/*要設(shè)的比.scolltable更寬一些*/width: 600px;}</style></head><body><div class="scolltable"><div class="content">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div></div> </body></html>

實(shí)現(xiàn)效果：

3.小結(jié)

本文主要是想記錄下在Webkit內(nèi)核的瀏覽器和IE中，如何自定義滾動(dòng)條的樣式，并分別提供了兩個(gè)demo。如有問題，歡迎指正。

此文已由作者授權(quán)騰訊云社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

更多專業(yè)前端知識(shí)，請(qǐng)上【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的如何自定义CSS滚动条的样式？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。