w3docs logo
  1. Snippets
  2. CSS
  3. How to Make Scrollbar Visible Only when Necessary

How to Make Scrollbar Visible Only when Necessary

As we know, scrollbars are commonly visible, even in the cases when there isn’t an overflowing text. But what if there is a need to make the scrollbars visible only when necessary?

On this page, you can find some examples of making the scrollbar on the <div> element visible only when necessary by using the CSS overflow, overflow-y, and overflow-x properties.

Create HTML

  • Use a <div> tag and place the content inside.
<div>
  Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. 
</div>

Add CSS

  • Set the overflow property to “auto”. This value adds scrollbar when the content overflows.
  • Set the width and height of the <div>.
div {
  overflow: auto;
  width: 150px;
  height: 150px;
}

Let’s see the result of our code.

Example of adding a scrollbar on the <div> using the overflow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow: auto;
        width: 150px;
        height: 150px;
        border: 1px solid grey;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </div>
  </body>
</html>

Result

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.

We can also add the scrollbar on the <div> element only vertically or horizontally. For that, we need to use the overflow-y or overflow-x property and set it to “auto” as in the previous example.

Example of adding a scrollbar on the <div> using the overflow-y property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-y: auto;
        width: 300px;
        height: 100px;
        border: 1px solid #2b00ff;
      }
    </style>
  </head>
  <body>
    <div>
      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>
  </body>
</html>

To scroll only horizontally, we need to use the overflow-x property as we mentioned above and set the width and border properties. Also, we add a <p> element inside the <div> tag and then add style to it in the CSS section.

Example of adding a scrollbar on the <div> using the overflow-x property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
        width: 300px;
        border: 1px solid #2b00ff;
      }
      p {
        width: 350px;
        padding: 10px 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        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.
      </p>
    </div>
  </body>
</html>
Do you find this helpful?