Making a div vertically scrollable using CSS
Making a div vertically scrollable is easy by using the CSS overflow property. There are different values in the overflow property. We can use that property for getting a scroll bar on a web page. The below-mentioned examples are the ways to set a vertical scroll bar on a web page.
Example 1: In this example, we have set the overflow-x: hidden; and overflow-y: auto; which will automatically hide the horizontal scroll bar and present only the vertical scrollbar.
html
<!DOCTYPE html> < html > < head > < style > h1 { color: Green; } div.scroll { margin: 4px, 4px; padding: 4px; background-color: green; width: 500px; height: 110px; overflow-x: hidden; overflow-y: auto; text-align: justify; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < 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's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Also, any Beginner can help other Beginner by writing articles on the w3wiki, publishing articles follow few steps that are Articles that need little modification /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 > </ center > </ body > </ html > |
Output:
Example 2: In this example use auto in place of overflow-x:hidden; and overflow-y:auto; to make div vertically scrollable.
html
<!DOCTYPE html> < html > < head > < style > h1 { color: Green; } div.gfg { margin: 5px; padding: 5px; background-color: green; width: 500px; height: 110px; overflow: auto; text-align: justify; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < div class = "gfg" >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's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and Successful. Also, any Beginner can help other Beginner by writing articles on the w3wiki, publishing articles follow few steps that are Articles that need little modification/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 > </ center > </ body > </ html > |
Output:
Contact Us