OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <style> | 2 <style> |
3 /* Let's get this party started */ | |
4 ::-webkit-scrollbar { | 3 ::-webkit-scrollbar { |
5 width: 150px; | 4 width: 10px; |
6 height: 150px; | 5 height: 10px; |
7 } | 6 } |
8 | |
9 /* Track */ | |
10 ::-webkit-scrollbar-track { | 7 ::-webkit-scrollbar-track { |
11 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | 8 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
12 -webkit-border-radius: 10px; | 9 -webkit-border-radius: 10px; |
13 border-radius: 10px; | 10 border-radius: 10px; |
14 } | 11 } |
15 | |
16 /* Handle */ | |
17 ::-webkit-scrollbar-thumb { | 12 ::-webkit-scrollbar-thumb { |
18 -webkit-border-radius: 1px; | 13 -webkit-border-radius: 1px; |
19 background: rgba(255,0,0,0.4); | 14 background: rgba(255,0,0,0.8); |
20 -webkit-box-shadow: inset 0 0 1px rgba(255,250,0,0.5); | 15 -webkit-box-shadow: inset 0 0 1px rgba(255,250,0,0.5); |
21 } | 16 } |
22 body { | 17 #space { |
23 width: 1000px; | 18 width: 1000px; |
24 height: 1000px; | 19 height: 1000px; |
25 } | 20 } |
26 | 21 html { |
27 div{ | 22 overflow: scroll; |
28 width: 1500px; | |
29 height: 1500px; | |
30 } | 23 } |
31 </style> | 24 </style> |
32 <body> | 25 <div id="space"></div> |
33 <div></div> | 26 <script> |
34 </body> | 27 var styleElement = document.createElement("style"); |
| 28 var sheet = document.head.appendChild(styleElement).sheet; |
| 29 document.body.offsetTop; |
| 30 sheet.insertRule("::-webkit-scrollbar { width: 100px;}", 0); |
| 31 </script> |
OLD | NEW |