Categories
CSS HTML Web development

HTML Scroll Box

When the content of the box is too large to fit in, an HTML scroll box will make sure that the box grows scroll bars.

Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property.

Example 1: Basic Scroll Box

<div style="height:150px;width:150px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. 
</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.

Example 2: Colored Scroll Box

<div style="height:150px;width:150px;overflow:auto;background-color:yellow;color:black;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here..</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here..

Example 3: Scroll Box Borders

<div style="height:150px;width:150px;overflow:auto;border:8px solid blue;padding:2%">Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here...</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here…

Example 4: Horizontal Scroll

<div style="border:1px solid black;height:100px;width:140px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.. 
</p>
</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here..

Hope it helps!

Enjoy coding!

Leave a Reply