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: