In this tutorial we will show you the solution of hide horizontal scrollbar CSS, today we will understand how to hide or remove horizontal scrollbar using CSS.
We hope you easily meant that what is horizontal scrollbar in browser.
One thing to keep in mind that there are many ways with help of which we are able to hide horizontal Scrollbar using CSS. Let us discuss some of them below.
Step By Step Guide On Hide Horizontal Scrollbar CSS :-
Now, from this concept two questions arises. Is the scrollbar is shown inside an html element in which we write some text and length of text is greater than dimensions of div?
And next is scrollbar is shown at web browser or html element, you don’t care about anything and just want to remove this scrollbar.
Well, the solutions of both are same question is same. Let’s understand this help of codes.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
body
{
overflow: hidden; /* First way */;
overflow-x: hidden; /* second way */;
}
/* Third way */;
/* Hide scrollbar for Chrome, Safari and Opera */
.body::-webkit-scrollbar {
display: none;
};
/* Hide scrollbar for IE, Edge and Firefox */
.body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
How to use background image in CSS
</h2>
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.
</body>
</html>
- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- 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 tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paired tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag
- As, we use overflow to hide scrollbars in browsers or html elements.
- Whereas if we want to hide horizontal scrollbars of specific browser or whole website then use the third way.
Conclusion :-
At last, in conclusion here we can say that with the help of this article we are able to understand about how to hide horizontal scrollbar CSS.
I hope this tutorial on hide horizontal scrollbar CSS helps you and the steps and mentioned above are easy to follow and implement.
About Amruta
