HOME / BLOG / BLOG-POST

How to design a custom scrollbar using html and css?

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<style> /* width */ ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } </style>
<style>
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
</style>

 


about authors

Sandip Das

Web Developer

Once a legend said “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler.



POST COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *