/    /  CSS Scrollbar

CSS Scrollbar

 

The content(text) of the box is larger than the box itself. This CSS scrollbar property has the values- visible, scroll, hidden, and auto.

 

scroll: scroll the page to see the content.

auto: scroll except that the scrollbar will be shown only when the content will overflow.

visible:  the content overflows the border of its containing element.

hidden:  hide both vertical and horizontal scrollbar. If you want to hide only the horizontal or vertical scrollbar, we can use the overflow-x and overflow-y.

 

Example:

 

<html>
 <head>
  <style type = "text/css">

    .scroll {
      display: block;
      border: 2px solid blue;
      padding: 5px;
      padding-bottom: 100px;
      width: 300px;
      height: 50px;
      overflow: scroll;
    }
    .auto {
      display: block;
      border: 2px solid blue;
      padding-bottom: 100px;
      width: 300px;
      height: 50px;
      overflow: auto;
     }
   </style>
 </head>

 <body>
 <center>
  <h1>Example of overflow: scroll;</h1>
  <div class = "scroll">
               <h2>Hello World</h2>
               <h3>This is I2Tutorials</h3>
  </div>

  <h1>Example of overflow: auto;</h1>

  <div class = "auto">
               <h2>Hello World</h2>
                <h3>This is I2Tutorials</h3>     
                </div>
       </center>
 </body>
</html>

 

OUTPUT:

 

CSS Scrollbar