Products
Services
Contact Us

Scripts: Dhtml :: Scrollable divs :: Library Article #5

Developer's Section

Create a Scrollable Div using CSS
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (3118)
Favorites:

Learn simple css tricks to create a scrollable div.

The CSS (Cascade Style Sheet) properties overflow, x-overflow and y-overflow can help you create a very simple scrollable div for your documents.

For example:

Vertical Scroller using CSS

This is line 1 - keep Scrolling

This is line 2 - keep Scrolling

This is line 3 - keep Scrolling

This is line 4 - keep Scrolling

This is line 5 - keep Scrolling

This is line 6 - keep Scrolling

This is line 7 - keep Scrolling

This is line 8 - keep Scrolling

This is line 9 - keep Scrolling

This is line 10 - keep Scrolling

This is line 11 - keep Scrolling

This is line 12 - keep Scrolling



Code for Vertical Scroller using CSS:

 Code Snippet 1

<!--include style CSS and overflow properties-->
<style type="text/css">
<!--
.scrollVertical {
border: 1px solid #667;
width:300px;
height:100px;
overflow:scroll;
overflow-x:hidden;
overflow-y:scroll;
}
-->
</style>
<!-- end of style -->
<br><br>
<div class="scrollVertical">
<p>This is line 1 - keep Scrolling</p>
<p>This is line 2 - keep Scrolling</p>
<p>This is line 3 - keep Scrolling</p>
<p>This is line 4 - keep Scrolling</p>
<p>This is line 5 - keep Scrolling</p>
<p>This is line 6 - keep Scrolling</p>
<p>This is line 7 - keep Scrolling</p>
<p>This is line 8 - keep Scrolling</p>
<p>This is line 9 - keep Scrolling</p>
<p>This is line 10 - keep Scrolling</p>
<p>This is line 11 - keep Scrolling</p>
<p>This is line 12 - keep Scrolling</p>
</div>



See other Scripts in Scrollable divs

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]