How to always show scrollbars with CSS?

By IncludeHelp Last updated : November 13, 2023

In a webpage or any container, the scrollbars are used to scroll through the contents if the specified display area is larger than the content. The scrollbars are two types horizontal and vertical. horizontal scrollbar shows horizontally and vertical scrollbar shows vertically. Both of the scrollbars can be defined using the CSS properties.

Show horizonal scrollbar

To show a horizontal scrollbar on the webpage/any container, use the overflow-x: scroll property. It will add only a horizontal scrollbar to the given container or any webpage.

Example

In this example, we are using overflow-x: scroll property to show horizontal scrollbar.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      body{	
      margin: auto;
      max-width: 800px;
      }
      .main-container{
      height: 250px;
      overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h1>Example to always show scrollbars with CSS</h1>
    <div class="main-container">
      <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>
      <pre>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.</pre>
    </div>
  </body>
</html>

Output

Show vertical scrollbar

To show a vertical scrollbar on the webpage/any container, use the overflow-y: scroll property. It will add only a vertical scrollbar to the given container or any webpage.

Example

In this example, we are using overflow-y: scroll property to show vertical scrollbar.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      body{	
      margin: auto;
      max-width: 800px;
      }
      .main-container{
      height: 250px;
      height: 200px;
      overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h1>Example to always show scrollbars with CSS</h1>
    <div class="main-container">
      <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>
      <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>
      <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>

Output

Show both (horizontal and vertical) scrollbars

To show both (horizontal and vertical) scrollbars on the webpage/any container, use the overflow: scroll property. It will add only both (horizontal and vertical) scrollbars to the given container or any webpage.

Example

In this example, we are using overflow: scroll property to show both (horizontal and vertical) scrollbars.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      body{	
      margin: auto;
      max-width: 800px;
      }
      .main-container{
      height: 250px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h1>Example to always show scrollbars with CSS</h1>
    <div class="main-container">
      <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>
      <pre>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.</pre>
      <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>

Output

How to change the space between words in CSS?

How to center a table using CSS?