Horje
How to set the overflow property to scroll in CSS ?

In this article, we will see how to set the overflow property to scroll in CSS. The overflow property is used to control the big content. It tells what to do when an element’s content is too big to fit in the specified area. When the overflow property is set to scroll, the overflow is clipped, but a scrollbar is added to see the rest.

Example 1: In this example, we are using the overflow scroll.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: scroll;
            color: green;
        }
    </style>
</head>
 
<body>
    <h2>GEEKSFORGEEKS</h2>
 
    <p>
        The CSS overflow controls big content.
        It tells whether to clip content or to
        add scroll bars.
    </p>
</body>
</html>

Output: 

 

Example 2: In this example, we have to use the overflow-x property to scroll. The overflow-x property is used when the content is overflown at the left and right edges.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            width: 40px;
            border: 1px solid;
            overflow-x: scroll;
        }
    </style>
</head>
<body>
    <h2>GEEKSFORGEEKS</h2>
 
    <p>
        The CSS overflow controls big
        content. It tells whether to
        clip content or to add scroll
        bars to show rest of the content.
    </p>
</body>
</html>

Output: 

Example 3: In this example, we have used the overflow-y property to scroll. The overflow-y property is used when the content overflows at the top and bottom edges

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            height: 50px;
            width: 200px;
            border: 1px solid;
            overflow-y: scroll;
        }
    </style>
</head>
 
<body>
    <h2>GEEKSFORGEEKS</h2>
 
    <p>
        The CSS overflow controls big
        content. It tells whether to
        clip content or to add scroll
        bars to show rest of the content.
    </p>
</body>
</html>

Output: 


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to draw an ellipse using CSS ? How to draw an ellipse using CSS ?
How to define where to navigate when using the arrow keys in CSS ? How to define where to navigate when using the arrow keys in CSS ?
How to change svg icon colors with Tailwind CSS ? How to change svg icon colors with Tailwind CSS ?
How to set different type of cursors using CSS ? How to set different type of cursors using CSS ?
How to set a background color to full page using Tailwind CSS ? How to set a background color to full page using Tailwind CSS ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje