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属性之间的区别。两者之间唯一的差异在于它们何时显示滚动条。