|
1 <head> |
|
2 <style> |
|
3 div::-webkit-scrollbar { |
|
4 width:17px; |
|
5 height:17px; |
|
6 } |
|
7 |
|
8 div::-webkit-scrollbar-button { |
|
9 display: block; |
|
10 width: 17px; |
|
11 height: 17px; |
|
12 } |
|
13 |
|
14 div::-webkit-scrollbar-button:-webkit-decrement:-webkit-start { |
|
15 background-color:lightblue; |
|
16 border:2px solid black; |
|
17 } |
|
18 |
|
19 div::-webkit-scrollbar-button:-webkit-increment:-webkit-start { |
|
20 background-color:lightgreen; |
|
21 border:2px solid black; |
|
22 } |
|
23 |
|
24 div::-webkit-scrollbar-button:-webkit-decrement:-webkit-end { |
|
25 background-color:orange; |
|
26 border:2px solid black; |
|
27 } |
|
28 |
|
29 div::-webkit-scrollbar-button:-webkit-increment:-webkit-end { |
|
30 background-color:brown; |
|
31 border:2px solid black; |
|
32 } |
|
33 |
|
34 div::-webkit-scrollbar-button:hover { |
|
35 background-color:black !important; |
|
36 } |
|
37 |
|
38 div::-webkit-scrollbar-thumb { |
|
39 min-width:20px; |
|
40 min-height:20px; |
|
41 background-color: navy; |
|
42 border:2px solid #cccccc; |
|
43 } |
|
44 |
|
45 div::-webkit-scrollbar-track { |
|
46 background-color: pink; |
|
47 } |
|
48 |
|
49 div::-webkit-scrollbar-thumb:hover { |
|
50 background-color: green; |
|
51 } |
|
52 |
|
53 div::-webkit-scrollbar-thumb:active { |
|
54 border:3px dotted white; |
|
55 } |
|
56 |
|
57 div::-webkit-scrollbar-track:hover { |
|
58 background-color: maroon; |
|
59 } |
|
60 |
|
61 </style> |
|
62 </head> |
|
63 <body> |
|
64 <div style="width:200px; height:200px; overflow-y:scroll; overflow-x:hidden"> |
|
65 Hello<br> |
|
66 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
|
67 Hello<br>Hello<br>Hello<br>Hello<br> |
|
68 Hello<br>Hello<br>Hello<br>Hello<br> |
|
69 <span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span> |
|
70 Hello<br>Hello<br>Hello<br>Hello<br> |
|
71 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
|
72 Hello<br>Hello<br>Hello<br>Hello<br> |
|
73 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
|
74 Hello<br>Hello<br>Hello<br>Hello<br> |
|
75 Hello<br>Hello<br>Hello<br> |
|
76 </div> |