HTML Scroll Box

An HTML scroll box is a box that grows scroll bars when it's contents are too large to fit in the box. How do you make the box? You create the box using a normal HTML element (such as the div element). Then, to make the box scroll, you apply the CSS overflow property to the div.

But, you don't need to worry about the technical details if you don't want to. You can simply copy and paste the HTML scroll box code below. Of course, you can change the values to suit (such as the size of the scroll box, color etc)

Basic HTML Scroll Box

<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>

Colored Scroll Boxes

Here's an example of an HTML scroll box with color added. You have a number of options when it comes to adding color to your scroll box. Click on the link to add color to your scroll boxes!

<div style="height:100px;width:140px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">This HTML scroll box has had color added. You can add color to the background of your scroll box. You can also add color to the scroll bars.</div>

More Colored Scrollboxes →

Customized Scrollbars

Use WebKit's extensions to customize your scrollbars. Also works on the browser's scrollbars (click Preview).

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>

<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}

/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}
</style>
</head>
<body>

<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>

</body>
</html>

More Customized Scrollbars →

Scroll Box with Images

You can also add images to your scroll box. This can be either a background image, or, one or more foreground images. Click on the link to add images to your scroll box!

<div style="height:180px;width:180px;overflow:auto;">
<img src="/pix/samples/11m.jpg" alt="Sample picture for scroll box">
</div>

More Image Scrollboxes →

Scroll Box Borders

Here's an example of an HTML scroll box with a border added. Click on the link to add a border to your scroll box!

<div style="height:100px;width:140px;overflow:auto;border:8px solid yellowgreen;padding:2%">This scroll box has had a border added to it. You can add borders to anything in HTML - including scroll boxes.</div>

More Scrollbox Borders →

Horizontal Scroll

Here's an example of an HTML scroll box with a horizontal scroll only. Click on the link to add horizontal scrolling to your scroll box!

<div style="border:1px solid black;height:100px;width:140px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 200 percent, it is 200 percent wider than the parent container - forcing an overflow. 
</p>
</div>

More Horizontal Scrolling →

Web.QHMIT.com