如何用CSS修改瀏覽器滾動條的樣式(實例詳解)

隨著互聯(lián)網(wǎng)的發(fā)展渔工,人們對頁面的要求越來越高畦贸,不只是功能好用八堡,而且還要顏值高樟凄。前端開發(fā)人員對于瀏覽器的滾動條并不陌生,當自帶的一些滾動條無法滿足我們的審美時兄渺,你知道如何用CSS修改瀏覽器滾動條的樣式嗎缝龄?今天就給大家介紹如何設置div滾動條樣式。有需要的小伙伴可以參考一下挂谍。

我們在自定義滾動條樣式前叔壤,首先要了解滾動條的結(jié)構(gòu)。通俗來講口叙,滾動條由兩部分組成:一部分是可以滑動的部分炼绘,我們稱它為滑塊;另一部分是滾動條的軌道庐扫,也就是滑塊的軌道饭望,一般來說,為了美觀形庭,滑塊的顏色要比軌道的顏色深一些铅辞。

web前端全棧資料粉絲福利(面試題、視頻萨醒、資料筆記斟珊、進階路線)


首先介紹滾動條相關的CSS代碼,以及他們的含義

::-webkit-scrollbar:指滾動條整體部分富纸,它的屬性有width,height,background等

::-webkit-scrollbar-button : 指滾動條兩邊的按鈕囤踩。當不需要時可以用display:none將其隱藏

::-webkit-scrollbar-track :指外層軌道部分,當不需要時可以用display:none將其隱藏晓褪,也可以添加你想要的顏色

::-webkit-scrollbar-track-piece :指內(nèi)層軌道部分堵漱,即滾動條中間的部分

::-webkit-scrollbar-thumb : 指滾動條里面可以拖動的部分,也就是滑塊

::-webkit-scrollbar-corner :指邊角部分

::-webkit-resizer :他用來定義右下角滑塊的樣式

但是最常用的是滾動條整體部分(-webkit-scrollbar)涣仿,滑塊(-webkit-scrollbar-thumb)以及外軌道( -webkit-scrollbar-track)三部分勤庐。

接下來我們將div盒子里面超出的部分隱藏示惊,給div設置滾動條樣式,看看怎么用CSS實現(xiàn)滾動條樣式愉镰。

HTML部分:

<divclass="scroll">

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>

????????have a nice day <br/>???

????</div>

CSS部分:

.scroll{

????????????margin:100pxauto;

????????????border: 1pxsolid#000;

????????????width: 200px;

????????????height: 300px;

????????????overflow: auto;

????????}

????????.scroll::-webkit-scrollbar {

????????????width: 10px;

???????????height: 10px;

????????}

????????/*正常情況下滑塊的樣式*/

????????.scroll::-webkit-scrollbar-thumb {

????????????background-color: rgba(0,0,0,.05);

????????????border-radius: 10px;

????????????-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

????????}

????????/*鼠標懸浮在該類指向的控件上時滑塊的樣式*/

????????.scroll:hover::-webkit-scrollbar-thumb {

???????????background-color: rgba(0,0,0,.2);

????????????border-radius: 10px;

????????????-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

????????}

????????/*鼠標懸浮在滑塊上時滑塊的樣式*/

????????.scroll::-webkit-scrollbar-thumb:hover {

????????????background-color: rgba(0,0,0,.4);

????????????-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

????????}

????????/*正常時候的主干部分*/

????????.scroll::-webkit-scrollbar-track {

????????????border-radius: 10px;

????????????-webkit-box-shadow: inset006pxrgba(0,0,0,0);

???????????background-color: white;

????????}

????????/*鼠標懸浮在滾動條上的主干部分*/

????????.scroll::-webkit-scrollbar-track:hover {

????????????-webkit-box-shadow: inset006pxrgba(0,0,0,.4);

????????????background-color: rgba(0,0,0,.01);

????????}

效果圖:


注意:如果是水平滾動條米罚,那么width屬性不起作用,height可以設置滾動條的高度丈探;如果是豎直滾動條录择,那么height高度不起作用,width可以用來設置滾動條的寬度碗降。在工作中可以根據(jù)需要設置想要的樣式隘竭,沒有接觸過得小伙伴可以多去嘗試,加深對知識點的理解遗锣,希望可以幫助到你货裹!

以上就是如何用CSS修改瀏覽器滾動條的樣式(實例詳解)的詳細內(nèi)容,更多請關注我>ァ;≡病!

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末笔咽,一起剝皮案震驚了整個濱河市搔预,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌叶组,老刑警劉巖拯田,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異甩十,居然都是意外死亡船庇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門侣监,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸭轮,“玉大人,你說我怎么就攤上這事橄霉∏砸” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵姓蜂,是天一觀的道長按厘。 經(jīng)常有香客問我,道長钱慢,這世上最難降的妖魔是什么逮京? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮束莫,結(jié)果婚禮上懒棉,老公的妹妹穿的比我還像新娘御吞。我一直安慰自己,他們只是感情好漓藕,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挟裂,像睡著了一般享钞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诀蓉,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天栗竖,我揣著相機與錄音,去河邊找鬼渠啤。 笑死狐肢,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的沥曹。 我是一名探鬼主播份名,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼妓美!你這毒婦竟也來了僵腺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤壶栋,失蹤者是張志新(化名)和其女友劉穎辰如,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贵试,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡琉兜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了毙玻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豌蟋。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖淆珊,靈堂內(nèi)的尸體忽然破棺而出夺饲,到底是詐尸還是另有隱情,我是刑警寧澤施符,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布往声,位于F島的核電站,受9級特大地震影響戳吝,放射性物質(zhì)發(fā)生泄漏浩销。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一听哭、第九天 我趴在偏房一處隱蔽的房頂上張望慢洋。 院中可真熱鬧塘雳,春花似錦、人聲如沸普筹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽太防。三九已至妻顶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蜒车,已是汗流浹背讳嘱。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留酿愧,地道東北人沥潭。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像嬉挡,于是被迫代替她去往敵國和親钝鸽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容