CSS3自定義滾動條樣式 -webkit-scrollbar

時間 2020-07-17

標籤 css3 css 自定義滾動條樣式 webkit scrollbar 欄目 CSS 简体版

原文原文鏈接

內容超出容器時，容器會出現滾動條，其自帶的滾動條有時沒法知足咱們審美要求，那麼咱們能夠經過css僞類來實現對滾動條的自定義。css

首先咱們要了解滾動條。滾動條從外觀來看是由兩部分組成：1，能夠滑動的部分，咱們叫它滑塊2，滾動條的軌道，即滑塊的軌道，通常來講滑塊的顏色比軌道的顏色深。html

滾動條的css樣式主要有三部分組成：web

　　一、::-webkit-scrollbar 定義了滾動條總體的樣式；spa

二、::-webkit-scrollbar-thumb 滑塊部分；code

　三、::-webkit-scrollbar-thumb 軌道部分；htm

下面以overflow-y:auto;爲例（overflow-x:auto同）it

html代碼：class

<div class="test test-1">test

< div class="scrollbar"></ div >

</ div >

css代碼：

.test{ 
       
  width 
  :  
  50px 
  ; 
 
  height 
  :  
  200px 
  ; 
 
  overflow 
  :  
  auto 
  ; 
 
  float 
  :  
  left 
  ; 
 
  margin 
  :  
  5px 
  ; 
 
  border 
  :  
  none 
  ; 
 
  } 
 
  .scrollbar{ 
 
  width 
  :  
  30px 
  ; 
 
  height 
  :  
  300px 
  ; 
 
  margin 
  :  
  0  
  auto 
  ; 
 
  } 
 
  .test 
  -1: 
  :-webkit-scrollbar { 
  /*滾動條總體樣式*/ 
 
  width 
  :  
  5px 
  ;      
  /*高寬分別對應橫豎滾動條的尺寸*/ 
 
  height 
  :  
  1px 
  ; 
 
  } 
 
  .test 
  -1: 
  :-webkit-scrollbar-thumb { 
  /*滾動條裏面小方塊*/ 
 
  border-radius:  
  10px 
  ; 
 
  background 
  :  
  #e5e5e5 
  
  ; 
 
  } 
 
  .test 
  -1: 
  :-webkit-scrollbar-track { 
  /*滾動條裏面軌道*/ 
 
  border-radius:  
  10px 
  ; 
 
  background 
  :  
  #EDEDED 
  ; 
 
  } 
 
   若是要改變滾動條的寬度：在::-webkit-scrollbar中改變便可；若是要改變滾動條滑塊的圓角， 
 
   　　在::-webkit-scrollbar-thumb 中改變； 
 
   　　若是要改軌道的圓角在::-webkit-scrollbar-track中改變；