使用CSS溢出属性使div垂直滚动变得容易。溢出属性中有不同的值。例如:overflow:auto;和轴隐藏程序, 例如overflow-x:hidden;并溢出-y:auto;。它将使垂直和水平滚动条, 而自动将仅使垂直滚动条。
对于垂直滚动条, 请使用x和y轴。设置overflow-x:hidden;和溢出-y:auto;会自动隐藏水平滚动条, 仅显示垂直滚动条。在这里, 滚动div可以垂直滚动。
范例1:
<!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 >lsbin</ 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 lsbin, 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 >
输出如下:
范例2:在此示例中, 使用auto代替overflow-x:hidden;。和溢出-y:auto;使div垂直滚动。
<!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 >lsbin</ 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 lsbin, 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 >
输出如下: