Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Hard
  • 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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :