Changing scroll bar colours

If you want to chang the vertical scroll bar of your website on most desktops then add this simple CSS to your chosen code editor.

/* Scroll bar thickness */
body::-webkit-scrollbar {
  width: 1.2rem;    
}

/* Scroll bar background track colour */
body::-webkit-scrollbar-track {
  background: #ff0000;        	
}

/* Scroll bar colour -- add border radius for rounded effect */
body::-webkit-scrollbar-thumb {
  background-color: #ffff00;
  border-radius: 0px;
}

We have picked bright colours for testing but you can change the #ff000 for whatever hex or variable you are using.

Please note that this will not work on all browsers and certainly not on mobile devices. For any browser which doesn’t support this, the default will be reverted back to.

Enjoy!