如何使用CSS使div垂直滚动?

2021年3月10日16:11:37 发表评论 584 次浏览

使用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 >

输出如下:

垂直滚动

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: