使用CSS使Div可以垂直滚动

有一种可能性是，我们将在网站中使用的内容可能是巨大的，可能会占用大量的空间，这意味着网站的其他元素可能会被取代，这可能会妨碍网站的响应性。为了避免这种情况的发生，需要给用户提供可滚动的内容，如果用户感兴趣，他或她可以向下滚动来阅读整个内容。

在这篇文章中，我们将看看如何使一个div垂直滚动，以及我们将使用什么属性来做到这一点。

如何使一个div可以垂直滚动

溢出属性可用于使DIV垂直滚动，因为溢出属性中可以输入多个值。有一些值，如隐藏和自动。根据所使用的值，我们可以制作一个水平和垂直的可滚动条。如果我们使用auto值，我们就可以得到垂直滚动条。让我们来看看overflow属性的语法。

语法

overflow:hidden/visible/clip/scroll/auto/inherit;

我们将使用x轴和y轴，然后可以将x轴的属性设置为隐藏，y轴设置为自动，这将隐藏水平可滚动条，只有垂直条可见，我们将自动得到所需的div。

示例

在这个例子中，我们将声明一个div，然后写一个段落，我们将为其添加overflow属性，使该div可以垂直滚动。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of vertically scrollable div</title>
   <style>
      h2 {
         color: Green;
      }
      .scrl {
         padding: 3px;
         color: white;
         margin: 2px, 2px;
         background-color: black;
         height: 118px;
         overflow-x: hidden;
         color: white;
         overflow-y: auto;
         text-align: justify;
         width: 489px;
      }
   </style>
</head>
<body>
   <center>
      <h2>Hi! This an example of the vertically scrollable div</h2>
      <div class="scrl">This is an example of the vertically scrollable 
         div many beginner coders need the help of some articles or some sort of tutorials
         to write there code. There are many instances in which the coder might need help
         or can be stuck on a particular question. The community of coders is very huge 
         and is ready to help everyone at anywhere and at whatever time. The coding community
         will help the coder to enhance his skills and his fluency in code. The coder can 
         choose a language to write his or her code depending on his interest as every 
         language has its own expertise and functions.
      </div>
   </center>
</body>
</html>

在上面的代码中，我们使用了overflow属性，并将其x轴改为隐藏，y轴改为可见，这就使我们在这里写的段落中有了一个可垂直滚动的条。让我们看看执行该代码后将得到的输出。

你可以看一下上面的输出，可以看到我们有一个垂直滚动条，可以用来向下滚动。

注意 – 当我们使用溢出属性时，有必要指定 “块元素 “的元素，否则它可能无法工作。因为该属性主要用于剪辑内容或添加可滚动条（无论是垂直还是水平），因为正在使用的内容太大，无法容纳在指定区域内。

让我们看看另一个例子，以便更好地理解这个属性。

示例

在这个例子中，我们要将该属性的值设置为自动，而不是改变该属性的x轴和y轴，以使该div可以垂直滚动。下面是这方面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
   <title> Another Example of vertically scrollable div</title>
   <style>
      .scrlr {
         margin: 4px;
         padding: 4px;
         color: white;
         background-color: black;
         width: 488px;
         height: 118px;
         margin: 4px;
         text-align: justify;
         overflow: auto;
         width: 488px;
         text-align: justify;
      }
      h2 {
         color: Red;
      }
   </style>
</head>
<body>
   <center>
      <h2>Hi! This another example of the verticallly scrollable div</h2>
      <div class="scrlr">This is an example of the vertically scrollable div
         many beginner coders need the help of some articles or some sort of tutorials to
         write there code. There are many instances in which the coder might need help or
         can be stuck on a particular question. The community of coders is very huge and
         is ready to help everyone at anywhere and at whatever time. The coding community
         will help the coder to enhance his skills and his fluency in code. The coder can
         choose a language to write his or her code depending on his interest as every
         language has its own expertise and functions.
      </div>
   </center>
</body>
</html>

在上面的代码中，我们将溢出属性的值改为自动，而不是将x轴设置为隐藏，y轴设置为自动，并使用同样的例子来看看我们的输出会是什么。让我们来看看这段代码将产生的输出。

你可以看一下上面的输出，可以看到即使在overflow属性上使用了自动值，我们也有滚动条。