CSS Scrollbars

In this tutorial you will learn about the CSS Scrollbars and its application with practical example.

CSS Scrollbars gives us way to handle cases when there is overflow of the content for an HTML Element Container.

We can add “Inline scrollbars” by creating a container smaller than its contents. This can be accomplished in conjunction CSS Overflow property.

Note:- The overflow property is supported by all major browsers.

Here is the list of possible values for the overflow property –

Value Description
visible Contents will be visible completely regardless of the dimensions on the container.
hidden Overflow contents will be hidden.
scroll Vertical or/and horizontal scroll bar added to the container.
auto Scorllbar added if contents overflows

Example:

 

 

auto
 

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using

 

 

hidden
 

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using

 

 

visible
 

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using

 

 

scroll
 

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using

In this tutorial we have learn about the CSS Scrollbars and its application with practical example. I hope you will like this tutorial.