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 forgoten, 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: Dimensions (Css tutorial)
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:
You can also read: Text (Css tutorial)
Below is a short example:
.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;
}
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.
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.
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 follow us on google+
You can also follow us on pinterest
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial) , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial) , Css margin (Css tutorial) , Css List (Css tutorial) , Css padding (Css tutorial) , Css cursor , Css outlne (Css tutorial) , Dimensions (Css tutorial)
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 forgoten, 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: Dimensions (Css tutorial)
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: Text (Css tutorial)
Below is a short example:
.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;
}
Example of scroll value:
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.
Example of auto value:
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.
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 follow us on google+
You can also follow us on pinterest
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial) , Text (Css tutorial) , Images (Css tutorial) , Links (Css tutorial) , Css table (Css tutorial) , Css border (Css tutorial) , Css margin (Css tutorial) , Css List (Css tutorial) , Css padding (Css tutorial) , Css cursor , Css outlne (Css tutorial) , Dimensions (Css tutorial)
