极客笔记CSS overflow: auto和overflow: scroll在CSS中有什么区别
在CSS中，’overflow’属性用于指定HTML元素内容的溢出情况。例如，如果div元素的高度为’500px’，而内部内容的高度为’1000px’，我们需要使内容可滚动。
在本教程中，我们将学习CSS ‘overflow’属性的’auto’和’scroll’值之间的区别。
在CSS中的overflow: auto
在CSS中，overflow: auto将HTML元素的溢出设置为auto。这意味着如果div的内容溢出，它将将’滚动’设置为overflow属性的值；否则，它将将’none’设置为overflow属性的值。
语法
用户可以按照以下语法使用overflow: auto CSS属性。
overflow: auto;
示例1
在下面的示例中，我们创建了HTML div元素并为其指定了’class=”main”的样式类名。我们还为div元素设置了固定的宽度和高度。同时，我们设置了’overflow: auto’的CSS属性。
在输出中，用户可以观察到由于内容尺寸超过了div元素的尺寸，因此显示了滚动条。
<html>
<head>
<style>
.main {
height: 100px;
width: 500px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
示例2
在下面的示例中，div元素内部内容的尺寸小于div元素的尺寸。在输出中，用户可以观察到div元素不可滚动，因为内容没有溢出。
<html>
<head>
<style>
.main {
height: 200px;
width: 100px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
在CSS中的滚动溢出
无论HTML元素的内容是否溢出，’overflow：scroll’始终显示滚动条，并始终显示水平和垂直滚动条。
语法
Overflow: scroll;
示例3
在下面的示例中，我们向div元素中添加了适应div元素尺寸的内容。同时，我们使用CSS将div元素的overflow设置为scroll。
在输出结果中，用户可以观察到，即使div元素的内容没有溢出，它仍然显示滚动条。
<html>
<head>
<style>
.main {
height: 200px;
width: 300px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> <i> overflow: scroll </i> in CSS </h2>
<div class = "main">
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
</div>
</body>
</html>
overflow: auto 和 overflow: scroll 的区别
这里是 overflow: auto 和 overflow: scroll CSS 属性的区别表。
| overflow: auto | Overflow: scroll |
|---|---|
| 当HTML元素的内容溢出或不适合原始元素的尺寸时，它只显示滚动条。 | 它始终显示滚动条。 |
示例
在下面的示例中，我们演示了overflow:scroll和overflow:auto一起使用的输出。我们对带有类名’scroll’的div元素设置了overflow:scroll，并对带有类名’auto’的div元素设置了overflow:auto。
在输出中，用户可以观察到overflow:scroll显示了滚动条，但overflow:auto没有。
<html>
<head>
<style>
.scroll {
height: 220px;
width: 500px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
.auto {
height: 200px;
width: 500px;
overflow: auto;
border: 3px dotted red;
margin: 10px;
}
</style>
</head>
<body>
<h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
<div class = "scroll">
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
</div>
<div class = "auto">
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
</div>
</body>
</html>
用户学习了overflow: auto和overflow: scroll CSS属性之间的区别。两者之间唯一的差异在于它们何时显示滚动条。