How to make a custom scrollbar

Teile den Beitrag

Share on facebook
Share on linkedin
Share on twitter
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

Get updates and learn from the best

Explore

Using BoxShadows effectively in Elementor

CSS’s BoxShadow is awesome. It allows us to easily cast shadows from objects and boxes, creating a three-dimensional effect. Google uses this effect extensively to

Möchten Sie Ihr Unternhemen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt

small_c_popup.png

Let's have a chat

Erfahren Sie, wie wir 100 Top-Marken zum Erfolg verholfen haben.