How to Make a Div Vertically Scrollable

Scrolls are a common part of websites. Making a div vertically scrollable is possible with CSS. It is easy by using the overflow property. There are different values in overflow property. For example overflow: auto; and the axis hiding procedure like overflow-x: hidden; and overflow-y: auto;. It will make a vertical and horizontal scrollable bar and the "auto" value will only make a vertically scrollable bar.

For the scrollable bar use the x and y-axis. Set the overflow-x: hidden; and overflow-y: auto; that will automatically hide the horizontal scrollbar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. Let’s see an example and try to discuss each part of the code.

1.Create HTML

  • Place the <h2> tag. Write some content in it.
  • Create a <div> with the class "scroll".
<body>
  <h2>W3docs</h2>
  <div class="scroll">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. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like).
  </div>
</body>

2. Add CSS

  • Set the background-color, width, and height of the div.
  • Use the overflow-x property which specifies whether the content should be hidden, visible or scrolls horizontally when the content overflows the element’s left and right edges. Set the "hidden" value.
  • Use the overflow-y property which specifies whether the content should be hidden, visible or scrolls vertically when the content overflows the element’s top and bottom edges. Set the "auto" value.
  • Use the text-align property and set the "center" value.
div.scroll{ 
background-color: #fed9ff; 
width: 600px; 
height: 150px; 
overflow-x: hidden; 
overflow-y: auto;
text-align: center; 
padding: 20px;
}

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

Here is the result of our code.

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div.scroll{ 
      background-color: #fed9ff; 
      width: 600px; 
      height: 150px; 
      overflow-x: hidden;
      overflow-y: auto; 
      text-align: center; 
      padding: 20px;
      } 
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div class="scroll">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. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like).
    </div>
  </body>
</html>

Let’s see another example.

Example

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style>  
      div.scroll{ 
      background-color: #fed9ff; 
      width: 600px; 
      height: 150px; 
      overflow: auto; 
      text-align: justify; 
      padding: 20px;
      } 
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div class="scroll">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. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </body>
</html>

In this example, we use overflow property which defines the behavior content. Set the "auto" value.


Do you find this helpful?

Related articles