How To Create Scrollable Elements In HTML – Simple Examples

Welcome to a quick tutorial on how to create scrollable elements in HTML and CSS. So you have a huge piece of content (table, list, text, image) that broke the page layout. A quick fix is to place the content in a scrollable container.

To create a scrollable element in HTML and CSS:

  1. Wrap the content in a <div> container. For example, <div class="scrollable"><img src="IMAGE.JPG"/></div>
  2. Set the dimensions of the container. For example, .scrollable { width: 100%; max-height: 400px; }
  3. Lastly, set overflow on the container to allow scrollbars. For example, .scrollable { overflow: auto; }

That covers the basics, but let us walk through more examples in this guide. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes Scrollable Elements Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

SCROLLABLE ELEMENTS

All right, let us now get into the examples of creating scrollable elements using CSS overflow.

 

1) CONTAINED SCROLLABLE TABLE

1-table.html
<style>
/* (A) SCROLLABLE CONTAINER */
.scrollableA {
  /* (A1) DIMENSIONS */
  width: 100%;
  max-height: 200px;
  /* (A2) OVERFLOW - ATTACH SCROLLBARS */
  overflow: auto;
}

/* (B) NOT IMPORTANT - FOR DEMO */
.scrollableA table td {
  padding: 50px;
  background: #fea
}
</style>
 
<div class="scrollableA">
  <table>
    <tr><td>First.</td></tr>
    <tr><td>Second.</td></tr>
    <tr><td>Third.</td></tr>
  </table>
</div>
First.
Second.
Third.

Yes, it’s that simple. As in the introduction snippet above:

  • We only need to wrap the <table> in a <div class="scrollableA"> container.
  • Set the dimensions of the container .scrollableA { width: 100%; max-height: 200px; }. The dimensions are actually up to you to decide.
  • Lastly, overflow: auto does the scrollbar magic. If the table is larger than the set dimensions, the browser will automatically attach scrollbars to the <div>.

 

 

2) CONTAINED SCROLLABLE LIST

2-list.html
<style>
/* (A) SCROLLABLE CONTAINER */
.scrollableB {
  /* (A1) DIMENSIONS */
  width: 100%;
  max-height: 200px;
  /* (A2) OVERFLOW - ATTACH SCROLLBARS */
  overflow: scroll;
}
 
/* (B) NOT IMPORTANT - FOR DEMO */
.scrollableB ul li {
  padding: 50px;
  background: #defffd
}
</style>
 
<div class="scrollableB">
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</div>
  • First
  • Second
  • Third

This is pretty much the same as the previous example. Wrap the list in a <div>, add overflow to it. But take note that we are using overflow: scroll here. This will force the browser to draw the scrollbars on both axes even if the contents are not large enough.

 

 

3) OVERFLOW IMAGE

3-img.html
<style>
/* (A) SCROLLABLE CONTAINER */
.scrollableC {
  /* (A1) DIMENSIONS */
  max-width: 500px;
  max-height: 300px;
  /* (A2) OVERFLOW - ATTACH SCROLLBARS */
  overflow-x: scroll;
  overflow-y: scroll;
}
</style>
 
<div class="scrollableC">
  <img src="sheep.jpg"/>
</div>

I think the “put something inside the scrollable <div> container” has gotten old at this point. So last thing to take note of, we can individually deal with how each axis should render with overflow-x and overflow-y.

 

4) OVERFLOW IS NOT THE BEST IDEA. RESPONSIVE DESIGN IS.

4-responsive.html
<style>
.res {
  max-width: 100%;
  max-height: 100%;
}
</style>
<img src="sheep.jpg" class="res"/>

Before you go crazy with “let’s put everything into scrollable boxes”, I have to discourage the use of scrollbars. Yes, these things look ugly on small-screen smartphones and it disrupts the “flick to scroll page”. What is the best way to deal with large content then? Responsive design.

In simple terms, that is content scaling and transforming themselves to fit. It’s really not that difficult, just add max-width: 100% to images and they will scale automatically. As for tables and lists, I will leave links to my other tutorials.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Scrollable Element In HTML CSS (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *