All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

CSS Hide Scrollbar But Allow Scroll

Last Updated : Mar 11, 2024

CSS Hide Scrollbar But Allow Scroll

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">
    <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="">
            background-color: black;
            overflow: hidden;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
            height: 250px;
            width: 250px;
            color: black;
            overflow: hidden;
        #innerDiv {
            height: 250px;
            width: 250px;
            background-color: skyblue;
            overflow-y: scroll;
            padding-right: 20px;
        <h1> TALKERSCODE </h1>
        <h3> CSS hide scrollbar but allow scroll </h3>
    <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.
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. Creating a <div> of id outerDiv and write a paragraph using another <div> of id innerDiv within it.
  9. 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.
  10. Now also set the height and width of the div element #innerDiv as same as the #outerDiv. Set the overflow-y to scroll.
  11. 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.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪