How to create content area scrollable instead of the page using CSS ?

Last Updated : 14 Dec, 2020

Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below.

visible: The property indicates that it can be rendered outside the block box and it is not clipped.
hidden: This property indicates that the overflow is clipped. The rest of the content will be invisible.
auto: If overflow is clipped, then automatically a scroll-bar is added for the rest of the content.
scroll: This property indicates that the scroll-bar is added to see the rest of the content if it is clipped.
initial: This property sets to its default value.
inherit: This property inherits the property from its parent element.

We can disable page scrolling by setting body overflow property to hidden.

In both the examples, we will be using this property to disable the page scrolling.

Example 1: In this example, we use overflow: scroll property to make “div” vertically and horizontally scrollable.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
</head> 
  
<style> 
    body { 
        /* disabling body scrolling */ 
        overflow: hidden; 
        margin: auto; 
        background: white; 
        margin-top: 4%; 
        text-align: center; 
    } 
      
    h1 { 
        color: Green; 
    } 
      
    .scroll { 
        /* enable div scrolling */ 
        overflow: scroll; 
        height: 8%; 
        background-color: aqua; 
        border: 1px black solid; 
        padding: 2%; 
        width: 300px; 
        margin: 0 auto; 
        white-space: nowrap; 
        font-size: large; 
    } 
</style> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        Making content area scrollable  
        instead of the page 
    </h2> 
  
    <div class="scroll"> 
        It is a good platform to learn programming.  
        It is an educational website. Prepare for  
        the Recruitment drive of product based  
        companies like Microsoft, Amazon, Adobe etc  
        with a free online placement preparation  
        course. The course focuses on various MCQ 
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are<br>  
        Articles that need little modification or 
        improvement from reviewers are published  
        first. To quickly get your articles reviewed, 
        please refer existing articles, their  
        formatting style, coding style, and try to  
        make you are close to them. In case you are  
        a beginner, you may refer Guidelines to write 
        an Article. It is a good platform to learn  
        programming. It is an educational website.  
        Prepare for the Recruitment drive of product  
        based companies like Microsoft, Amazon, Adobe  
        etc with<br> a free online placement preparation  
        course. The course focuses on various MCQ's &  
        Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by<br> writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are Articles  
        that need little modification or improvement  
        from reviewers are published first. To quickly  
        get your articles reviewed, please refer  
        existing articles, their formatting style,  
        coding style, and try to make you are close  
        to them. In case you are a beginner, you may  
        refer Guidelines to write an Article. 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In this example, use overflow:auto; to make “div” vertically and horizontally scrollable.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <style> 
        body { 
            /* disabling body scrolling */ 
            overflow: hidden; 
            margin: auto; 
            background: white; 
            margin-top: 4%; 
            text-align: center; 
        } 
          
        h1 { 
            color: Green; 
        } 
          
        .scroll { 
            /* enable div scrolling */ 
            overflow: auto; 
            height: 8%; 
            background-color: aqua; 
            border: 1px black solid; 
            padding: 2%; 
            width: 300px; 
            margin: 0 auto; 
            white-space: nowrap; 
            font-size: large; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        Making content area scrollable  
        instead of the page 
    </h2> 
  
    <div class="scroll"> 
        It is a good platform to learn programming.  
        It is an educational website. Prepare for  
        the Recruitment drive of product based  
        companies like Microsoft, Amazon, Adobe etc  
        with a free online placement preparation  
        course. The course focuses on various MCQ 
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are<br>  
        Articles that need little modification or 
        improvement from reviewers are published  
        first. To quickly get your articles reviewed, 
        please refer existing articles, their  
        formatting style, coding style, and try to  
        make you are close to them. In case you are  
        a beginner, you may refer Guidelines to write 
        an Article. It is a good platform to learn  
        programming. It is an educational website.  
        Prepare for the Recruitment drive of product  
        based companies like Microsoft, Amazon, Adobe  
        etc with<br> a free online placement preparation  
        course. The course focuses on various MCQ's &  
        Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by<br> writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are Articles  
        that need little modification or improvement  
        from reviewers are published first. To quickly  
        get your articles reviewed, please refer  
        existing articles, their formatting style,  
        coding style, and try to make you are close  
        to them. In case you are a beginner, you may  
        refer Guidelines to write an Article. 
    </div> 
</body> 
  
</html> 

Output:

Note: You can enable only vertical scrolling by setting overflow-y to scroll and auto and overflow-x to hidden.

Similarly for horizontal scrolling, set overflow-x to scroll or auto and overflow-y to hidden.

Example 3: This example is used only for vertical scrolling of content area.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <style> 
        body { 
            overflow: hidden; 
            margin: auto; 
            background: white; 
            margin-top: 4%; 
            text-align: center; 
        } 
          
        h1 { 
            color: Green; 
        } 
          
        .scroll { 
            overflow-y: auto; 
            overflow-x: hidden; 
            height: 50%; 
            background-color: aqua; 
            border: 1px black solid; 
            padding: 2%; 
            width: 500px; 
            margin: 0 auto; 
            font-size: large; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
        Making content area scrollable  
        instead of the page 
    </h2> 
  
    <div class="scroll"> 
        It is a good platform to learn programming.  
        It is an educational website. Prepare for  
        the Recruitment drive of product based  
        companies like Microsoft, Amazon, Adobe etc  
        with a free online placement preparation  
        course. The course focuses on various MCQ 
        & Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are<br>  
        Articles that need little modification or 
        improvement from reviewers are published  
        first. To quickly get your articles reviewed, 
        please refer existing articles, their  
        formatting style, coding style, and try to  
        make you are close to them. In case you are  
        a beginner, you may refer Guidelines to write 
        an Article. It is a good platform to learn  
        programming. It is an educational website.  
        Prepare for the Recruitment drive of product  
        based companies like Microsoft, Amazon, Adobe  
        etc with<br> a free online placement preparation  
        course. The course focuses on various MCQ's &  
        Coding question likely to be asked in the  
        interviews & make your upcoming placement  
        season efficient and successful. Also, any  
        geeks can help other geeks by<br> writing  
        articles on the GeeksforGeeks, publishing  
        articles follow few steps that are Articles  
        that need little modification or improvement  
        from reviewers are published first. To quickly  
        get your articles reviewed, please refer  
        existing articles, their formatting style,  
        coding style, and try to make you are close  
        to them. In case you are a beginner, you may  
        refer Guidelines to write an Article. 
    </div> 
</body> 
  
</html> 