What is the difference between overflow: auto and overflow: scroll in CSS?-HTML Tutorial-php.cn

What is the difference between overflow: auto and overflow: scroll in CSS?

WBOY

Release： 2023-08-28 11:29:02

forward

1042 people have browsed it

overflow: auto 和 overflow: scroll 在CSS中有什么区别？

In CSS, the ‘overflow’ attribute is used to specify the overflow of the content of an HTML element. For example, if the height of the div element is "500px" and the height of the inner content is "1000px", we need to make the content scrollable.

In this tutorial, we will learn the difference between the "auto" and "scroll" values of the CSS "overflow" property.

Overflow: Automatic in CSS

In CSS, overflow: auto sets the overflow of HTML elements to auto. This means that if the div's content overflows, it will set 'scroll' to the value of the overflow property; otherwise, it will set 'none' to the value of the overflow property.

grammar

Users can use the overflow: auto CSS property according to the following syntax.

overflow: auto;

Copy after login

Example

In the example below, we have created the HTML div element and given the "main" class name. Additionally, we set a fixed width and height for the div element. Additionally, we set the "overflow: auto" CSS property

In the output, the user can observe that it displays scroll bars because the content size is larger than the size of the div element.

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

Copy after login

Example

In the example below, the dimensions of the inner content of the div element are smaller than the dimensions of the div element. In the output, the user can observe that the div element is not scrollable as the content does not overflow.

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

Copy after login

Overflow: Scroll in CSS

"overflow:scroll" always displays scroll bars in HTML elements, even if the element's content does not overflow, and it always displays horizontal and vertical scroll bars.

grammar

Overflow: scroll;

Copy after login

Example

In the example below, we add content to a div element that fits the dimensions of the div element. Additionally, we use CSS to set "overflow:scroll" for the div element.

In the output, the user can observe that even though the content of the div element does not overflow, it displays scroll bars.

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

Copy after login

Difference between overflow:auto and overflow:scroll

This is the difference table for the overflow:auto and overflow:scroll CSS properties.

Overflow: Automatic	Overflow:Scroll
Display scroll bars only when the content of an HTML element overflows or does not fit within the dimensions of the original element.	It always shows scrollbars.

Example

In the following example, we demonstrate the output of overflow:scroll and overflow:automatic together. We set overflow:scroll for the div element with the class name "scroll" and set overflow:auto for the div element with the class name "auto".

In the output, the user can observe that overflow:scroll displays the scrollbar, but does not display 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>

Copy after login

Users learned the difference between the "overflow:auto" and "overflow:scroll" CSS properties. The only difference between the two is when it shows scrollbars.

The above is the detailed content of What is the difference between overflow: auto and overflow: scroll in CSS?. For more information, please follow other related articles on the PHP Chinese website!