CSS Hide Scrollbar But Allow Scroll
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Ashish
In this article we will show you the solution of css hide scrollbar but allow scroll, we will hide the scrollbar but allow the scroll using CSS. We will use the overflow property to do that so.\
At first, we will create two <div> elements one within another. Set the outer <div> elements to overflow property hidden.
But we will set the inner <div> element to overflow property scroll.
Now this method is applicable to Chrome, opera, edge, safari, etc. browsers. We will see an example below.
Step By Step Guide On CSS Hide Scrollbar But Allow Scroll :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS hide scrollbar but allow scroll </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: black;
overflow: hidden;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
#outerDiv{
height: 250px;
width: 250px;
color: black;
overflow: hidden;
}
#innerDiv {
height: 250px;
width: 250px;
background-color: skyblue;
overflow-y: scroll;
padding-right: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> CSS hide scrollbar but allow scroll </h3>
</center>
<div id="outerDiv">
<div id="innerDiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate fugit suscipit, error aut asperiores tenetur maxime velit, natus animi, sunt nobis non cumque id eos ipsam eligendi iure. Incidunt nostrum, rerum porro quibusdam labore impedit assumenda hic sunt recusandae fugit beatae qui delectus facere. Ipsam facere illum ex aut saepe? Libero assumenda distinctio alias optio corporis quia. Nihil ut mollitia quasi velit. Deleniti, magni impedit! Odio tempore eveniet rerum repellat enim perspiciatis eos. Nisi quisquam ab delectus facere obcaecati cumque perspiciatis? Amet, aperiam molestiae necessitatibus assumenda eveniet est saepe magni dolor, voluptas distinctio error, excepturi deleniti voluptatum enim iure nulla.
</div>
</div>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Creating a <div> of id outerDiv and write a paragraph using another <div> of id innerDiv within it.
- In the <style> tag setting the height and width of the <div> whose id of #outerDiv. And also setting background-color and color to it. Set the overflow to hidden.
- Now also set the height and width of the div element #innerDiv as same as the #outerDiv. Set the overflow-y to scroll.
- At last, we will able to scroll after hiding the scrollbar.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to CSS hide the scrollbar but allow scroll.
I hope this article on css hide scrollbar but allow scroll helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
