All TalkersCode Topics

Follow TalkersCode On Social Media

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

Custom Horizontal Scrollbar CSS

Last Updated : Jul 1, 2023

Custom Horizontal Scrollbar CSS

In this tutorial we will show you the solution of custom horizontal scrollbar CSS, here custom scrollbar means that modified scrollbar. There are many ways with help of which we are able to modify scrollbar.

In custom scrollbar, we can also hide scrollbar. So, let us see the various ways to done this.

Step By Step Guide On Custom Horizontal Scrollbar CSS :-

Here, below an example is provided in which we use some CSS properties to modify scrollbar.

Below, there is also a way is given which show you how to hide scrollbar also. So, let us see the example below.

<!DOCTYPE html>
<html>
<head>
   <title> custom horizontal scrollbar CSS </title>
 <style>
/* inside this we have to define width of 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;
}
/* To Hide scrollbar for Chrome, Safari and Opera, etc browsers
body::-webkit-scrollbar {
  display: none;
}
*/
/* To Hide scrollbar for Edge and Firefox Browsers
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*/
 </style>
</head>
<body>
<h1>
 Talker’s code – 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 title of the webpage. 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 color white and on hover it changes to pink in color, whereas the background of the scrollbar in which handles move is of black color. We can also use more CSS properties to create a custom or more styled scrollbar.
  7. Where to hide the scrollbar, we just have to use, the below code in style tag.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand how to disable horizontal scroll using CSS.

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