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: (1847)
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:


System Message:
  • Your DHTML script has been sent. Please allow 48 hours for processing.


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 ]