If you want to change the look and feel of the default scroll in Webkit Browsers ie. Chrome, Safari and Microsoft Edge, so you can apply the below CSS properties. This will work across all the Webkit Browsers.
Sometimes we use an element or section on a page in a website which has a scroll attached to it. And it doesn’t match the design of our website because of its default look and feel.
But now with the help of CSS3, you can change the look and feel of the scroll of a webkit browser.
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #bfbcba;
border-radius:5px
}
::-webkit-scrollbar-thumb {
background: #65208a;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: #7e09bd;
}
Example:
This will only work in a Webkit Browser.
