ManualTests/scrollbar-hover-active.html

   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>