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

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:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.