| <head> |
| <style> |
| div::-webkit-scrollbar { |
| width:17px; |
| height:17px; |
| } |
| |
| div::-webkit-scrollbar-button { |
| display: block; |
| width: 17px; |
| height: 17px; |
| } |
| |
| div::-webkit-scrollbar-button:-webkit-decrement:-webkit-start { |
| background-color:lightblue; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:-webkit-increment:-webkit-start { |
| background-color:lightgreen; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:-webkit-decrement:-webkit-end { |
| background-color:orange; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:-webkit-increment:-webkit-end { |
| background-color:brown; |
| border:2px solid black; |
| } |
| |
| div::-webkit-scrollbar-button:hover { |
| background-color:black !important; |
| } |
| |
| div::-webkit-scrollbar-thumb { |
| min-width:20px; |
| min-height:20px; |
| background-color: navy; |
| border:2px solid #cccccc; |
| } |
| |
| div::-webkit-scrollbar-track { |
| background-color: pink; |
| } |
| |
| div::-webkit-scrollbar-thumb:hover { |
| background-color: green; |
| } |
| |
| div::-webkit-scrollbar-thumb:active { |
| border:3px dotted white; |
| } |
| |
| div::-webkit-scrollbar-track:hover { |
| background-color: maroon; |
| } |
| |
| </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> |
