关注我们

CSS - 滚动条

可能存在元素的内容可能大于为其分配的空间量的情况。例如，给定的width和height属性不允许有足够的空间容纳元素的内容。

CSS提供了一个名为 overflow 的属性，该属性告诉浏览器如果盒子的内容大于盒子本身的大小，该怎么办。此属性可以采用以下值之一-

Sr.No.	Value & Remark
1	visible 默认值。内容不会被修剪，会呈现在元素框之外。
2	hidden 内容会被修剪，并且其余内容是不可见的。
3	scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4	auto 链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-scrollbars.html 来源：LearnFk无涯教程网如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

这是一个例子-

复制代码

<html>
   <head>
      <style type="text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class="scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class="auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

深入拆解Java虚拟机 -〔郑雨迪〕

深入拆解Tomcat & Jetty -〔李号双〕

OpenResty从入门到实战 -〔温铭〕

WebAssembly入门课 -〔于航〕

说透5G -〔杨四昌〕

程序员的个人财富课 -〔王喆〕

HarmonyOS快速入门与实战 -〔QCon+案例研习社〕

大数据经典论文解读 -〔徐文浩〕

LangChain 实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)