Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 27, 2021 03:33 pm GMT

Create Custom Scroll Bar Using CSS

If you are thinking about styling the browsers scrollbar then you are in the right place. You may have tried to make a custom scrollbar but did not get the actual output that you were wanted. In this tutorial, youll come to know how to create a custom scrollbar for all browsers using pure CSS.

Yes! you heard it right, we are not going to use any scrollbar plugin or custom scrolling function. Well just explore the ways to style the browsers default scrollbar using CSS properties. Well! the benefit of using pure CSS is that the page scrolling will remain smooth as compare to scrolling plugins.

The scrollbar styles that we are going to share replace the browsers default scrollbar styles whether it is a horizontal or vertical scrollbar. You can check this custom scrollbar on the demo page. There you will see two scroll bars, one of them is a page scrollbar and the other is a scrollable section.

How to Create Custom Scrollbar

Image description
In order to create a custom scrollbar, you just need to have some scrollable content on your webpage. Basically, you dont need to create any special HTML for the custom scrollbar. If you have already a scrollbar in your webpage then simply skip the HTML and read the CSS styling guide. Anyhow, if you dont have any element on your page, you may try the following scrollable box. Just keep some content inside it.

<div class="scrollable" style="height: 1000px; width: 400px"> This is a scrollable div.</div>

Besides this, we created three classes for horizontal, vertical, and both horizontal and vertical scroll. You may add the "horizontal-scroll" class to a div element to make a horizontal scrollable box.

<div class="horizontal-scroll">Place your div content here...</div>

Similarly, you can use the "vertical-scroll" class for the vertical scrollable box.

<div class="vertical-scroll">Place your div content here...</div>

You can add a class name "scrollable" that we styled a 500px both horizontal and vertical scrollable box.

<div class="scrollable">Place your div content here...</div>

Styling Browsers Scrollbar with CSS

In order to style the scrollbar, well use the CSS -WebKit- extension and target the browsers built-in selector for the scrollbar. So, select the scrollbar with the -webkit- prefix and define the width of the scrollbar. It will set the thickness of the scrollbar. You can define the custom value for the CSS width property (that we defined 15px) according to your needs.

/* scrollbar width */::-webkit-scrollbar {  width: 15px;}

Best Designed Web Scroll bar.

If you want to add custom scroll bar with hover effect just copy below code and add it to your webpage.

<style>/* width */::-webkit-scrollbar {  width: 15px;}/* Track */::-webkit-scrollbar-track {  box-shadow: inset 0 0 5px #ddd;   border-radius: 15px;}/* Handle */::-webkit-scrollbar-thumb {  background: orange;   border-radius: 15px;}/* Handle on hover */::-webkit-scrollbar-thumb:hover {  background: #e30d00; }</style>

Want to read in detail from our official website Create Custom Scroll Bar
To SEE DEMO

Thats all! I hope you have successfully designed browsers' custom scrollbar using CSS. If you have any questions or suggestions, let me know by discuss below.


Original Link: https://dev.to/softcodeon/create-custom-scroll-bar-using-css-8b3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To