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>

Another Approach:

You can make the scrollbar visible only when necessary by using the ::-webkit-scrollbar pseudo-element in CSS. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        overflow-y: auto; /* Enable vertical scrolling */
        width: 250px;
      }

      /* Hide scrollbar by default */
      ::-webkit-scrollbar {
        width: 0.5em;
        background-color: #f5f5f5;
      }

      /* Make scrollbar visible when needed */
      ::-webkit-scrollbar-thumb {
        background-color: #000000;
      }

      /* Make scrollbar track visible when needed */
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <p>
      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. 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.
    </p>
    <p>
      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. 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.
    </p>
    <p>
      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. 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.
    </p>
  </body>
</html>

In this example, we have set the overflow-y property to auto on the body element to enable vertical scrolling when necessary.

Next, we've used the ::-webkit-scrollbar pseudo-element to style the scrollbar. By default, we've set the width of the scrollbar to 0.5em and given it a light gray background color. This makes the scrollbar appear hidden when it's not needed.

When the content exceeds the height of the container and scrolling is required, the scrollbar will automatically appear. We've used the ::-webkit-scrollbar-thumb pseudo-element to style the appearance of the scrollbar thumb (the part of the scrollbar that is dragged up and down). We've given it a black background color to make it visible when needed.

Finally, we've used the ::-webkit-scrollbar-track pseudo-element to style the scrollbar track (the area that the thumb moves along). We've given it the same light gray background color as the default scrollbar to make it visible when the thumb is dragged up and down.

Note that the ::-webkit-scrollbar pseudo-element is a non-standard feature and is only supported in webkit-based browsers such as Google Chrome and Safari. Other browsers may use different pseudo-elements or methods to style scrollbars.