Including and Removing Scrollbars in CSS3

Mastering CSS3 – Part 6

Forward: In this part of the series, we see how to include and remove scrollbars on html elements using CSS3.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 6 of my series, Mastering CSS3. In this part of the series, we see how to include and remove scrollbars on html elements using CSS3. I assume you have read the previous parts of the series before reaching here; this is a continuation.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

HTML Elements with Default Scrollbars
The body element and the textarea control element (for forms) are html elements that have scrollbars by default. The scrollbars of these elements can be removed using CSS before the elements are displayed. However, I do not advice you to remove the scrollbars of the textarea element, since you would hardly know how much text the user would like to type into the textarea element. You can remove the scrollbars of the body element when you want to use div elements and the fixed position property for layout (major) of the web page.

HTML Elements that can need Scrollbars
HTML elements that do not have scrollbars by default, but that can need scrollbars are the div element and the listing elements (ol, ul, and dl). There are other elements that can have scrollbars but I will not go into that.

Height and Width of the Element
The html element should be given a height and width so that when the content is too much, the scrollbars will be used.

The overflow Property
The CSS overflow property is used to include scrollbars to an html element if it did not have them or to remove them if they were there. A value of “hidden” to the overflow property will remove the scrollbars and a value of “scroll” will include the scrollbars.

Read and try the following code that removes the scrollbars of the body element:

<!DOCTYPE HTML>
<html>
<head>
    <title>Major layout with Fixed DIVs</title>
</head>
<body style="overflow:hidden">

</body>
</html>

Read and try the following code that includes the scrollbars for a div element

<!DOCTYPE HTML>
<html>
<head>
    <title>Major layout with Fixed DIVs</title>
</head>
<body>

    <div style="height:100px; width:100px; overflow:scroll">
        text text text text text text text text text text text text text text text text text text text text text text
    </div>

</body>
</html>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Including and Removing Scrollbars in CSS3

Mastering CSS3 – Part 6

Introduction

Related Links

Comments