All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Custom Scrollbar CSS For All Browsers

Last Updated : Mar 11, 2024

Custom Scrollbar CSS For All Browsers

In this tutorial we will show you the solution of custom scrollbar CSS for all browsers, in this series of CSS tutorials, today we will understand how to create a custom scrollbar for all browsers with help of CSS.

First of all, there are many ways with help of which we can create a custom scrollbar.

But then one issue arises, is this custom scrollbar applicable to all browsers, or is we have to write different codes for different browsers? Like these, many other questions arise in our minds.

So, let us today find the answer to our above question with the help of the example below.

Step By Step Guide On Custom Scrollbar CSS For All Browsers :-

Here, we are going to create a custom scrollbar. Then there are many ways with help of which we can create a custom scrollbar.

In this example, we will show you some basic things that we can do in our scrollbar with help of CSS, main thing is to show this custom scrollbar on all browsers. Let start.

<!DOCTYPE html>
<html>
<head>
   <title> custom scrollbar CSS for all browser </title>
 <style>
/* inside this we have to define the width of the scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
/* background color of the scrollbar in which scrollbar moves */
::-webkit-scrollbar-track {
  background: black;
/* here, we can also use many other CSS properties*/
}
/* color the handle is described here */
::-webkit-scrollbar-thumb {
  background: white;
/* here, we can also use many other CSS properties*/
}
/* color the handle is described here but on hover */
::-webkit-scrollbar-thumb:hover {
  background: red;
}
 </style>
</head>
<body>
<h1>
 TalkersCode – CSS tutorials
</h1>
<h2>
 Custom horizontal scrollbar CSS
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</p>
</body>
</html>
  1. As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
  2. Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
  3. After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
  4. Now, next is our title tag which defines the webpage’s title. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
  5. Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
  6. Here, as we see that we just create a modified scrollbar with the color white, and on hover, it changes to pink in color, whereas the background of the scrollbar in which handles move is black.
  7. We can also use more CSS properties to create a custom or more styled scrollbar and this is applicable in all browsers. Yes, the code that we specified above is mostly working in all browsers.
  8. If due to some issue, this code does not work in your browser, then there are some plugins that we can use

Conclusion :-

At last, in conclusion, here we can say that with this article’s help we can understand custom scrollbar CSS for all browsers.

I hope this tutorial on custom scrollbar CSS for all browsers helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪