In this article we will show you the solution of how to hide the scrollbar in CSS, the Cascading style sheet or CSS is used to add style to the HTML.
If the text is too large to fit in the <div> overflow happens. We can control this overflow by adding a scrollbar.
Now in this tutorial, we will able to hide the scrollbar but also can keep scrolling through the website.
In this tutorial, we will use a pseudo-element, which is dependent on the browser we will use.
For example, if the browser we are using is Chrome or opera we’ll use ::-webkit-scrollbar .
Step By Step Guide On How To Hide The Scrollbar In CSS :-
In this example, we will hide the scrollbar but still be able to keep scrolling. Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> how to hide the scrollbar in CSS </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
div {
color : green ;
background-color : blanchedalmond ;
border : 2px solid blue ;
width : 300px ;
height : 300px ;
overflow : scroll ;
}
/* pseudo element */
.paragraph::-webkit-scrollbar {
display : none ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> how to hide the scrollbar in CSS </p>
<div class = " paragraph " >
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus consectetur, est, eum reprehenderit non ipsa reiciendis asperiores sed eveniet quia dignissimos cumque quidem sunt deserunt. Maxime dolorum ipsa voluptate consectetur odio adipisci dolore laborum blanditiis doloremque vero sunt at molestias dicta perspiciatis totam perferendis est debitis modi quibusdam cum excepturi nam esse, pariatur possimus. Labore reiciendis quam dolorum voluptates beatae? Numquam deleniti illo suscipit, adipisci culpa quae tempora! Quos quae ratione perferendis. Minus necessitatibus magni doloremque impedit quam dolore maxime consequuntur aliquam sapiente illo facilis reprehenderit molestiae aut consectetur perspiciatis, doloribus quisquam quod odio cumque voluptas dolorum, eius saepe ex.
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Then create a <div> with the class “ paragraph “ . then write some paragraph into the <div>
- Now create a <style> tag to add CSS to a HTML file into the <head> tag.
- Here We added some style to the heading <h1>
- By selecting the <div> tag, we added some CSS (e.g.: background color, color, border, height, and weight) and we also set the “ overflow “ property to “ scroll “ to add the scrollbar.
- Now here we used a pseudo-element ::-webkit-scrollbar (for Chrome, opera, etc. browser). By selecting the class “ paragraph “ by .paragraph with this, we keep the “ display “ property to “none” to hide the scrollbar.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to know how to hide the scrollbar in CSS.
I hope this article on how to hide the scrollbar in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
