Scrolling HTML Text Box

Below are examples of scrolling HTML boxes. Each includes a live preview and the code you can copy and use. Replace the text inside the box with your own content.

Vertical Scrolling Box

This is a vertical scrolling box. Add more text and scrollbars appear when needed.

<style>
div.html-scroll-box {
  height: 100px;
  width: 300px;
  font: 10pt Verdana, sans-serif;
  overflow: scroll;
  border: 1px solid #ccc;
  padding: 5px;
  background: #f9f9f9;
}
</style>

<div class="html-scroll-box">
This is a vertical scrolling box. Add more text and scrollbars appear when needed.
</div>

Horizontal Scrolling Box

This is a horizontal scrolling box. → → → Keep typing on one line and it scrolls horizontally.

<style>
div.html-scroll-box.horizontal {
  height: 100px;
  width: 300px;
  font: 10pt Verdana, sans-serif;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 5px;
  background: #f9f9f9;
}
</style>

<div class="html-scroll-box horizontal">
This is a horizontal scrolling box. → → → Keep typing on one line and it scrolls horizontally.
</div>

Auto Overflow Box

This box only shows scrollbars when necessary. Add more text to see it scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<style>
div.html-scroll-box.auto {
  height: 100px;
  width: 300px;
  font: 10pt Verdana, sans-serif;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 5px;
  background: #f9f9f9;
}
</style>

<div class="html-scroll-box auto">
This box only shows scrollbars when necessary. Add more text to see it scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>