How to make a custom scrollbar

Share on facebook
Share on whatsapp
Share on email

Hello friends! This time I am going to show you how to make a custom scrollbar in Elementor and the Hello Theme.

Step 1: Copy the code and place it in the custom CSS

/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(#ED6030, #EC4E57);;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ee7601;
}

Step 2: Adjust values

You can adjust all the colors and shadows directly in the code. For instance if you want to use a linear background on hover too, than just copy the CSS from the handle and place it in the hover CSS.

Can I Use css-scrollbar? Data on support for the css-scrollbar feature across the major browsers from caniuse.com.

Subscribe to our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Leave a Reply

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