Make your DIV (division) scrollable using css only & its Use

Sometimes there is limitation on width and height of page or element , then we can use this script/code to overcome.
you can scroll it only horizontle, only vertical or both direction.
The property is “OVERFLOW” which can be used as :
for only vertical :

overflow-y: scroll;
overflow-x: hidden;

for only horizontal:

overflow-y: hidden;
overflow-x: scroll;

for both vertical & horizontal:

overflow-y: scroll;
overflow-x: scroll;


or use only

overflow:auto;

for hiding both vertical & horizontal:

overflow-y: hidden;
overflow-x: hidden;

Also you can customize the scroll-bar …

scrollbar-face-color: #DDE0E1;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: black;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: #315B7D;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #4DECF8S;

Now, how to use it….
(its a example for vertical scrolling)
another example….

<style>
.scroll_div
{
width: 100px;
height:100px;
overflow:auto;
text-align: justify;
margin:0;
padding:10px 10px 10px 10px;
scrollbar-face-color: #666669;
scrollbar-highlight-color: #030000;
scrollbar-3dlight-color: #030000;
scrollbar-darkshadow-color:#030000 ;
scrollbar-shadow-color: #030000;
scrollbar-arrow-color: #030000;
scrollbar-track-color: #030000;
}
</style>

now in body tag

<body>
<div class="scroll_div">
some text.............................
<br>
some text.............................
<br>
some text.............................
<br>
some text.............................
<br>
some text.............................
<br>
some text.............................
<br>
</div>
</body>

—————————————————————
hope it will be useful.
thanks,
Nikhil Ughade
UI Designer
Mumbai (India)

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: