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.
<!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 >GeeksforGeeks</ 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 geeks can help other
geeks by writing articles on the GeeksforGeeks,
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.
<!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 >GeeksforGeeks</ 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 geeks can help other
geeks by writing articles on the GeeksforGeeks,
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: