Others


Others


Change Scrollbar Width, Background Colour and Thumb Properties Using CSS


The following example shows, how to change scrollbar with, background colour , thumb colour and scrollbar hover properties.

Example : index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /*scrollbar width */
    ::-webkit-scrollbar {
      width:15px;
    }

    /*scrollbar Track */
    ::-webkit-scrollbar-track{
      background:#804040; 
      
    }
     
    /*scrollbar Thumb Handle */
    ::-webkit-scrollbar-thumb{
      background: #0000ff;
      border-radius:10px;      
    }

    /*scrollbar Thumb Handle on hover */
    ::-webkit-scrollbar-thumb:hover{
      background: #408080; 
    }
    </style>
  </head>  
  <body style='min-height:1000px;'>
    <p style='line-height:30px;'>
    It was just a burger. Why couldn't she understand that? She knew he'd completely changed his life around her eating habits, so why couldn't she give him a break this one time? She wasn't even supposed to have found out. Yes, he had promised her and yes, he had broken that promise, but still in his mind, all it had been was just a burger.
    </p>
    <p style='line-height:30px;'>
    It was difficult to explain to them how the diagnosis of certain death had actually given him life. While everyone around him was in tears and upset, he actually felt more at ease. The doctor said it would be less than a year. That gave him a year to live, something he'd failed to do with his daily drudgery of a routine that had passed as life until then.
    </p>
  </body>
</html>
Try it Yourself

Live Demo