Hello guys! morning and welcome to this new section of my tutorial on Css. Very soon i will round up my tutorials on Css and start a new tutorial on JavaScript.
You guys are always free to ask your questions in areas you don't understand fully and you can also appreciate the good work of this great blog by droping your comments in the comment box below and by inviting your friends too.
In this tutorial am going to be talking about Css scrollbars. Incase you still don't know what a scroll bar is or incase you have forgotten, am going to explain that now to you all.
There may be a case when an element's content might be larger than the amount of space allocated to it. For example, the given width and height properties do not allow enough space to accommodate the content of the element.
You can also read our tutorial post on: Css Dimensions
CSS provides a property called overflow, which tells the browser what to do if the box's contents are larger than the box itself. This property can take one of the following values:
Value
|
Description
|
visible
|
Allows the content to overflow the
borders of its containing element.
|
hidden
|
The content of the nested element is
simply cut off at the border of the containing element and no scrollbars is
visible.
|
scroll
|
The size of the containing element
does not change, but the scrollbars are added to allow the user to scroll to
see the content.
|
auto
|
The purpose is the same as scroll, but
the scrollbar will be shown only if the content does overflow.
|
You can also read our tutorial post on: Css Text
Below is a short example:
<html>
<head>
<style type="text/css">
.scroll {
display: block;
border: 2px solid black;
padding: 6px;
margin-top: 3px;
width: 200px;
height: 30px;
overflow: scroll;
}
.auto {
display: block;
border: 2px solid black;
padding: 6px;
margin-top: 3px;
width: 200px;
height: 30px;
overflow: auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
This is a tutorial post on scrollbars which is written and compiled by nkpara kennedy chinaza,
a freelancer and the owner of web design tutorialz. I am just trying to keep lots of content here
in other for you guys to see how scrollbars works if there is an overflow in an element box. This
provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
This is a tutorial post on scrollbars which is written and compiled by nkpara kennedy chinaza,
a freelancer and the owner of web design tutorialz. I am just trying to keep lots of content here
in other for you guys to see how scrollbars works if there is an overflow in an element box. This
provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>
<head>
<style type="text/css">
.scroll {
display: block;
border: 2px solid black;
padding: 6px;
margin-top: 3px;
width: 200px;
height: 30px;
overflow: scroll;
}
.auto {
display: block;
border: 2px solid black;
padding: 6px;
margin-top: 3px;
width: 200px;
height: 30px;
overflow: auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
This is a tutorial post on scrollbars which is written and compiled by nkpara kennedy chinaza,
a freelancer and the owner of web design tutorialz. I am just trying to keep lots of content here
in other for you guys to see how scrollbars works if there is an overflow in an element box. This
provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
This is a tutorial post on scrollbars which is written and compiled by nkpara kennedy chinaza,
a freelancer and the owner of web design tutorialz. I am just trying to keep lots of content here
in other for you guys to see how scrollbars works if there is an overflow in an element box. This
provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>
Alright guys, we have come to the end of this tutorial on Css scrollbars. Feel free to ask your questions in any area you don't understand properly, and your questions will be attended to as soon as possible.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.
You can follow us on twitter
You can also follow us on pinterest