Horizontal and vertical scrollbar in HTML5 and CSS3

In this post we are going to learn how we can put horizontal and vertical scrollbar in HTML5 and css3. In earlier version of HTML and CSS if we have to put only horizontal or vertical scrollbar that was not possible. Because there was no such properties there in CSS to describe whether we have horizontal scrollbar or vertical scrollbar.

Scroll bar in earlier version of HTML and CSS3:

In earlier version of HTML and CSS we have to use overflow property to display scrollbar for a particular div tag and If we add scrollbar it will add both horizontal and vertical scrollbar even if there is no need for that.Following is a code for that.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .divScroll {
            overflow:scroll;
            height:200px;
            width:100px;
        }
    </style>
</head>
<body>
    <div class="divScroll">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    </div>
</body>
</html>

here I have taken div and assign overflow: scroll and now we run that example following will be output.

Here you can see horizontal and vertical scrollbar both even if there is not requirement for that.

Scroll bar with HTML5 and CSS3:

Now let’s change some of CSS3 attribute and see how its works with HTML5 and CSS3. I have changed css code like following.

.divScroll {
    overflow-y:scroll;
    height:200px;
    width:100px;
}

Now let’s run that in browser.

Here you can see in the above code that we have only vertical scrollbar. Same way we could use overflow-x for horizontal scroll bar. That’s it. Hope you like it. Stay tuned for more..

DotNetJalps