Title

HTML CSS custom scrollbar

description

Customise the html scrollbar, with variations in color if needed based on body class

Published 2022-08-05

Modified 2022-08-19

content

				
					/* SCROLLBAR */
/* width */
body::-webkit-scrollbar {
    width: 26px;
    /* if using a custom cursor */
    cursor: url('https://www.site.com/files/point-aim.png'), auto!important;
}
/* Track */
body::-webkit-scrollbar-track {
  background: #fafafa;
}

/* variations */
body.whitebg::-webkit-scrollbar-track {
  background: #EC008C;
}
body.pinkbg::-webkit-scrollbar-track, body.bluebg::-webkit-scrollbar-track {
  background: white;
}

/* Handle */
body::-webkit-scrollbar-thumb {
  background: white;
  border:3px solid black;
  border-radius:5px;
  cursor:url('https://www.ronaldpostma.com/wp-content/uploads/grab-move.png'), auto!important;
}

/* variations */
body.whitebg::-webkit-scrollbar-thumb {
  background: #0EB991;
}
body.pinkbg::-webkit-scrollbar-thumb {
  background: white;
}
body.bluebg::-webkit-scrollbar-thumb {
  background: #EC008C;
}
/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  filter: brightness(85%);
}
				
			

Sources & References