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 scroll box is made using the HTML <div> tag and the scroll bars are defined using the CSS overflow property.
Example 1: Basic Scroll Box
<div style="height:150px;width:400px;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. 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. 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:400px;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. 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. 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:400px;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:400px;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:
Hope it helps!
Enjoy coding!
Read also: