W3docs
en
Log in

How to Hide Scrollbars with CSS

Do you know that a bright example of hiding the scroll bar is Facebook chat window? Learn how to hide scrollbars and find solutions! Snippet/CSS

Tags

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.

Create HTML

  • Create three <div> elements with the "outer", "inner" and "element" classes in the <body> section. Write your content that should be scrolled.

How to create divs

<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 <span class="property">position</span> property. Specify the overflow-x property with the "hidden" value and overflow-y with the "scroll" value.
  • Add a rule for WebKit/Blink browsers (Chrome, Safari, Edge) using the ::-webkit-scrollbar pseudo-element.
  • Add scrollbar-width: none; to the .inner class for modern Firefox and Edge support.

CSS rules to hide scrollbars:

.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;
  scrollbar-width: none; /* Hides scrollbar in Firefox and Edge */
}

.inner::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome, Safari, and newer Edge */
}

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

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

Example of how to hide scrollbars with CSS

<!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;
        scrollbar-width: none;
      }
      .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 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>
Try it Yourself »

Result

<div class="demo mt-1 mb-5 not-prose"> XFI5 <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 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.</div> </div> </div> </div> Another way to hide the scrollbar is to set overflow: hidden;. Note that this method will also clip any content that exceeds the element's dimensions, so it's only suitable when the content fits within the container.

How to use the overflow property to hide scrollbars

.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:

**Example how to hide scrollbar from <textarea> **

<!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>
Try it Yourself »