How to Hide Scrollbars with CSS

If you don't know how to hide scrollbars for major browsers with pure CSS, you are in the right place!

Hiding scrollbars is useful when the whole content is visible. To hide scrollbars from any element, you can use CSS code.

In this snippet, we will demonstrate how to remove a scrollbar from the <div> and <textarea> elements.

Let’s see an example and try to discuss each part of the code together.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create three <div> elements with the "outer", "inner" and "element" classes in the <body> section. Write your content that should be scrolled.
<body>
  <div class="outer">
    <div class="inner">
      <div class="element">
        Lorem Ipsum is simply dummy text …
      </div>
    </div>
  </div>
</body>

Add CSS

  • Set the width and height properties for the "element" and "outer" classes.
  • Set the position to "relative" and the overflow to "hidden" for the "outer" class. Also, add a border.
  • Set the left property for the "inner" class and use the "absolute" value of the position property. Specify the overflow-x property with the "hidden" value and overflow-y with the "scroll" value.
  • Add a simple rule for -Webkit- browsers.
.element,
.outer {
  width: 300px;
  height: 300px;
}

.outer {
  border: 2px solid #666666;
  position: relative;
  overflow: hidden;
}

.inner {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner::-webkit-scrollbar {
  display: none;
}

Let’s bring the code parts together to see how it works!

Example of hiding the scrollbar from the <div> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element,
      .outer {
        width: 300px;
        height: 300px;
      }
      .outer {
        border: 2px solid #666666;
        position: relative;
        overflow: hidden;
      }
      .inner {
        position: absolute;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      .inner::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="element">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
          when an unknown printer took a galley of type and scrambled it to make a type 
          specimen book. It has survived not only five centuries, but also the leap into 
          electronic typesetting, remaining essentially unchanged. It was popularised 
          in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and 
          typesetting industry. Lorem Ipsum has been the industry's standard dummy text
          ever since the 1500s, when an unknown printer took a galley of type and scrambled 
          it to make a type specimen book. It has survived not only five centuries, but also 
          the leap into electronic typesetting, remaining essentially unchanged. It was popularised
          in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
          and more recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and 
          typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
          ever since the 1500s, when an unknown printer took a galley of type and scrambled
          it to make a type specimen book. It has survived not only five centuries, but
          also the leap into electronic typesetting, remaining essentially unchanged. 
          It was popularised in the 1960s with the release of Letraset sheets containing 
          Lorem Ipsum passages, and more recently with desktop publishing software like 
          Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text
          of the printing and typesetting industry. Lorem Ipsum has been the industry's 
          standard dummy text ever since the 1500s, when an unknown printer took a galley 
          of type and scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting, remaining essentially
          unchanged. It was popularised n the 1960s with the release of Letraset sheets containing 
          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus 
          PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
          and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
          since the 1500s, when an unknown printer took a galley of type and scrambled it to make
          a type specimen book. It has survived not only five centuries, but also the leap 
          into electronic typesetting, remaining essentially unchanged. It was popularised in the 
          1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
          with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
          has been the industry's standard dummy text ever since the 1500s, when an unknown printer
          took a galley of type and scrambled it to make a type specimen book. It has survived not
          only five centuries, but also the leap into electronic typesetting, remaining essentially
          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </div>
      </div>
    </div>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it

Another way to hide the scrollbar is to add the following code:

.element {
  overflow: hidden;
}

Now, let’s discuss how to remove a scrollbar from the <textarea> tag.

The <textarea> element is used to allow the users to enter text, give feedback, leave comments. By default, the <textarea> element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up and down.

We need to set the CSS overflow property to "hidden" so as to hide the scrollbar.

Below is an example, where we hide the scrollbar from the <textarea> element:

Example of hiding the scrollbar from the <textarea> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea rows="15" cols="30">
        Enter your content... 
      </textarea>
    </form>
  </body>
</html>