Introduction
This chapter demonstrates about the CSS Scroll Bars Which provides an over flow property to the content and following are the concepts are covered in this chapter.
- Scroll bars
Description
Scroll bars is defined as the If the elements have the huge content which is larger then the amount of space allocated for example given height and width properties are does not allow enough room to accommodate the content of the element then which provides the overflow property which is used to tell if the box contents is larger then the box which have some values those are tabulated below.
The image below demonstrates the creating of the scroll bar as shown.
The code below demonstrates the CSS Scroll bar as shown below.
[html]
<html>
<head>
</head>
<style type="text/css">
.scroll{
display:block;
border: 1px solid blue;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid blue;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Value | Description |
|---|---|
| Visisble | Which allows the to overflow through the borders of containing elements. |
| hidden | In which the content of the nested elements is simply cutted in which scroll bar is not visible. |
| scroll | In which scroll bar is visible which allow user to scroll the to see the content because the size of the content doesn't change. |
| auto | Which is same as scroll in which scroll bar is shown if content does overflow.. |
| widows | Which specify the minimum number of lines display at the top of the page if not the entire text block is moved to the previous page. |
Key Points
- Auto scroll bar will visible if the content does overflow.
- hidden property scroll bar will not visible.