| <head> |
| <style> |
| div::-webkit-scrollbar { |
| width:17px; |
| height:17px; |
| } |
| |
| div::-webkit-scrollbar-button { |
| display: block; |
| width: 17px; |
| height: 17px; |
| } |
| |
| div::-webkit-scrollbar-button:decrement:start { |
| background-color:lightblue; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:increment:start { |
| background-color:lightgreen; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:decrement:end { |
| background-color:orange; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:increment:end { |
| background-color:brown; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-thumb { |
| min-width:20px; |
| min-height:20px; |
| background-color: navy; |
| border:2px solid #cccccc; |
| } |
| |
| div::-webkit-scrollbar-track-piece:decrement { |
| background-color: olive; |
| } |
| |
| div::-webkit-scrollbar-track-piece:increment { |
| background-color: pink; |
| } |
| </style> |
| </head> |
| <body> |
| <div style="width:200px; height:200px; overflow-y:scroll; overflow-x:hidden"> |
| Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| <span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br> |
| </div> |
