in

CSS SCROLLBARS | Set Scrollbars On Web Pages Using CSS

In this tutorial we will be looking at CSS scrollbars, how and when we can add them to our web document during structuring. In our previous tutorial we looked at CSS DIMENSIONS and how we can add them to our block level elements. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS DIMENSION | Learn How To Dimension Web Pages Using CSS

CSS SCROLLBARS

Sometimes as developers when we are developing web pages we come across content that are larger than the element in which they contain. Such situations can be controlled using the CSS scrollbars. We can easily add scrollbars to the content element so that users can view other content by using the scrollbar. The attribute used for the scrollbar here is the overflow attribute and the below property values are added to it.

Below are the list of properties we can use to control the scroll bars in a web page.

property Description
visible This property allows the overflow to show up on the web page
hidden This property hides the overflow by cutting out the overflown area
scroll This property adds a scrollbar to the element
auto This property adds a scrollbar to the element only when the content over flows

visible scrollbar property

This property ensures that the overflow is visible. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF VISIBLE OVERFLOW PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 50px; width: 300px; overflow: visible;" >
      This is a paragraph used to display how visible overflow property works in css. We can use the overflow property 
      to control how overflow is handle in a web document during web design. 
   </p>
</body>
</html>

Result

ILLUSTRATION OF VISIBLE OVERFLOW PROPERTY

This is a paragraph used to display how visible overflow property works in css. We can use the overflow property to control how overflow is handle in a web document during web design.

hidden overflow property

This property is used to hide overflow in a web document. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF HIDDEN OVERFLOW PROPERTY</title>
</head>
<body>
   <p style="border: solid 2px red; height: 50px; width: 300px; overflow: hidden;" >
      This is a paragraph used to display how hidden overflow property works in css. We can use the overflow property 
      to control how overflow is handle in a web document during web design. 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF HIDDEN OVERFLOW PROPERTY

This is a paragraph used to display how hidden overflow property works in css. We can use the overflow property to control how overflow is handle in a web document during web design.

Scroll and Auto overflow property

The scroll overflow property adds scroll bar to the side of the element while the auto overflow property adds scrollbar to the side of the element only when its content overflows.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
  
   <title>ILLUSTRATION OF SCROLL AND AUTO OVERFLOW PROPERTY</title>
</head>
<body>
   <caption>scroll overflow</caption>
   <p style="border: solid 2px red; height: 50px; width: 300px; overflow: scroll;" >
      This is a paragraph used to display how scroll overflow property works in css. We can use the overflow property 
      to control how overflow is handle in a web document during web design. 
   </p>
   <br>

<caption>auto overflow</caption>
   <p style="border: solid 2px red; height: 50px; width: 300px; overflow: auto;" >
      This is a paragraph used to display how auto overflow property works in css. We can use the overflow property 
      to control how overflow is handle in a web document during web design. 
   </p>
</body>
</html>

Result

ILLUSTRATION OF SCROLL AND AUTO OVERFLOW PROPERTY scroll overflow

This is a paragraph used to display how scroll overflow property works in css. We can use the overflow property to control how overflow is handle in a web document during web design.


auto overflow

This is a paragraph used to display how auto overflow property works in css. We can use the overflow property to control how overflow is handle in a web document during web design.

conclusion

The CSS SCROLLBARS properties listed above are needed when controlling the overflow of content on a web page. A good understanding of this overflow properties will enable you make good web page with the right overflow. Lets move on to the next topic on CSS VISIBILITY

What do you think?

css dimension

CSS DIMENSION | Learn How To Dimension Web Pages Using CSS

css visibility

CSS VISIBILITY | Steps to Set the Visibility of Elements on Web Pages