Posted on 

Mac OS X、iPad、iPhone、iPod 修改 Safari、Chrome 預設 Scrollbar

各位在使用蘋果系統的電腦或手機時，一定會發現他們的 scroll bar 預設是隱藏起來的

必須要去滾動它才會出現，但沒滾動隨即又消失

最近公司系統剛上線有客戶反應一開始沒出現 scroll bar 不知道底下還有東西

所以只好透過修改預設的 scroll bar 讓它 always 出現了…

雖然說 Mac OS X 可以在「設定」->「一般」-> Scrollbar 設定為 Always 可以解決這樣的情況

但這實在是太消極了，每個客戶打電話進來都要這樣教實在太浪費成本

所以可以利用以下這個方式修改預設的 Scroll bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* For the "inset" look only */  
html {  
    overflow: auto;  
}  
body {  
    position: absolute;  
    top: 20px;  
    left: 20px;  
    bottom: 20px;  
    right: 20px;  
    padding: 30px;   
    overflow-y: scroll;  
    overflow-x: hidden;  
}

/* 整條 Scroll bar 的部份 */  
::-webkit-scrollbar {  
    width: 12px;  
}  
   
/* Scroll bar 的背後 */  
::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   
    -webkit-border-radius: 10px;  
    border-radius: 10px;  
}  
   
/* Scroll bar 本身 */  
::-webkit-scrollbar-thumb {  
    -webkit-border-radius: 10px;  
    border-radius: 10px;  
    background: rgba(255,0,0,0.8);   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);   
}  
/* Scroll bar 非使用中時的狀況 */  
::-webkit-scrollbar-thumb:window-inactive {  
	background: rgba(255,0,0,0.4);   
}

比較重要的部份是 ::-webkit 的地方

html 與 body 內的 css 可以隨個人情況斟酌使用哦!

來源：Inset & Customized WebKit Scrollbar

License

The article uses Attribution-NonCommercial-ShareAlike 4.0 International license agreement, please indicate the source for reprinting.

Share