How to create content area scrollable instead of the page using CSS ?
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:
Please Login to comment...