OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE HTML> |
2 <style> | 2 <style> |
3 ::-webkit-scrollbar { | 3 ::-webkit-scrollbar { |
| 4 width: 10px; |
4 height: 10px; | 5 height: 10px; |
5 width: 10px | 6 } |
| 7 ::-webkit-scrollbar-track { |
| 8 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
| 9 -webkit-border-radius: 10px; |
| 10 border-radius: 10px; |
6 } | 11 } |
7 ::-webkit-scrollbar-thumb { | 12 ::-webkit-scrollbar-thumb { |
| 13 -webkit-border-radius: 1px; |
8 background: rgba(255,0,0,0.8); | 14 background: rgba(255,0,0,0.8); |
| 15 -webkit-box-shadow: inset 0 0 1px rgba(255,250,0,0.5); |
| 16 } |
| 17 #space { |
| 18 width: 1000px; |
| 19 height: 1000px; |
9 } | 20 } |
10 html { | 21 html { |
11 overflow-y: scroll; | 22 overflow: scroll; |
12 } | 23 } |
13 </style> | 24 </style> |
14 <div style="height:700px"></div> | 25 <div id="space"></div> |
15 <script src="../resources/run-after-layout-and-paint.js"></script> | |
16 <script> | 26 <script> |
17 var styleElement = document.createElement("style"); | 27 var styleElement = document.createElement("style"); |
18 var sheet = document.head.appendChild(styleElement).sheet; | 28 var sheet = document.head.appendChild(styleElement).sheet; |
19 function addRule(selector, css){ | 29 function addRule(selector, css){ |
20 var propText = Object.keys(css).map(function(p){ | 30 var propText = Object.keys(css).map(function(p){ |
21 return p+":"+css[p] | 31 return p+":"+css[p] |
22 }).join(";"); | 32 }).join(";"); |
23 sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length); | 33 sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length); |
24 }; | 34 }; |
25 runAfterLayoutAndPaint(function() { | 35 document.body.offsetTop; |
26 addRule("::-webkit-scrollbar-thumb", {background: "rgba(13,53,178,0.8)",}); | 36 addRule("::-webkit-scrollbar", {width: "100px",}); |
27 }, true); | |
28 </script> | 37 </script> |
OLD | NEW |