詳解如何自定義CSS滾動(dòng)條的樣式

本文會(huì)介紹CSS滾動(dòng)條選擇器,并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中,自定義一個(gè)橫向以及一個(gè)縱向的滾動(dòng)條。
0.需求
有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動(dòng)條樣式,因?yàn)椴粔蚨ㄖ苹兔烙^。那么如何自定義滾動(dòng)條的樣式呢?下面一起來(lái)看看吧。
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)條沒(méi)有滑塊的軌道部分
::-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等樣式試了下沒(méi)有效果,這里不再列出:
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)
如果覺(jué)得上述說(shuō)明有些抽象,可以直接在瀏覽器中打開demo,結(jié)合demo中的注釋來(lái)理解各個(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)核的瀏覽器
說(shuō)明:
(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)效果:
IE
3.小結(jié)
本文主要是想記錄下在Webkit內(nèi)核的瀏覽器和IE中,如何自定義滾動(dòng)條的樣式,并分別提供了兩個(gè)demo。如有問(wèn)題,歡迎指正。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
純css修改瀏覽器scrollbar滾動(dòng)條樣式示例
這篇文章主要介紹了純css修改瀏覽器scrollbar滾動(dòng)條樣式示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-23CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼
這篇文章主要介紹了CSS 設(shè)置滾動(dòng)條樣式的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-06- 這篇文章主要介紹了css3自定義滾動(dòng)條樣式寫法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-25
- 本篇文章主要介紹了CSS3自定義滾動(dòng)條樣式的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-21
純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式
這篇文章主要介紹了純CSS改變webkit內(nèi)核瀏覽器的滾動(dòng)條樣式,需要的朋友可以參考下2014-04-17- 使用CSS樣式設(shè)置div滾動(dòng)條,直接充當(dāng)了文本框的角色,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下2013-12-24