CSS – Add scroll bar to div

A scroll bar could be added to a div by applying the overflow property in CSS.

.scrollable {
  height: 100px;
  overflow-y: scroll;
}

 

The above style will limit the height of the scrollable div and add a vertical scroll bar to it. For a horizontal scroll bar, just use overflow-x instead of overflow-y.

Try the following example and see how it works.

<html>
  <head>
    <title>Add scroll bar to a div</title>
    <style type="text/css">
      .scrollable {
        height: 100px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div class="scrollable">
      <table>
        <tr>
          <td>row 1</td>
        </tr>
        <tr>
          <td>row 2</td>
        </tr>
        <tr>
          <td>row 3</td>
        </tr>
        <tr>
          <td>row 4</td>
        </tr>
        <tr>
          <td>row 5</td>
        </tr>
        <tr>
          <td>row 6</td>
        </tr>
        <tr>
          <td>row 7</td>
        </tr>
        <tr>
          <td>row 8</td>
        </tr>
      </table>
    </div>
  </body>
</html>

 

Done =)

Reference: W3Schools – CSS overflow Property

About these ads

2 thoughts on “CSS – Add scroll bar to div

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s