使用 CSS 使 Div 可垂直滾動-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 使 Div 可垂直滾動

PHPz

Sep 06, 2023 pm 05:29 PM

使用 CSS 使 Div 可垂直滚动

我們要在網站中使用的內容可能會很大並且可能會佔用大量空間，這意味著網站的其他元素可能會被取代，從而影響網站的回應能力。為了避免這種情況的發生，需要為用戶提供可滾動的內容，以便如果用戶感興趣，他或她可以向下滾動以閱讀整個內容。

在本文中，我們將了解如何使 div 垂直滾動以及我們將使用什麼屬性來實現此目的。

如何讓div垂直捲動？

overflow屬性可以用來使DIV垂直捲動，因為可以在overflow屬性中輸入多個值。有一些值，例如hidden和auto。我們可以根據所使用的值建立水平和垂直捲軸。如果使用auto值，我們可以獲得垂直捲軸。讓我們來看看overflow屬性的語法：

文法

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

我們將使用x軸和y軸，並將x軸的屬性設為隱藏，y軸的屬性設為自動，這將隱藏水平滾動條，只顯示垂直滾動條，我們將自動獲得所需的div。

範例

在此範例中，我們將聲明一個 div，然後編寫一個段落，我們將在其中新增溢出屬性以使 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 id="Hi-This-an-example-of-the-vertically-scrollable-div">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>

在上面的程式碼中，我們使用了溢出屬性，並將其 x 軸更改為隱藏，將 y 軸更改為可見，這為我們在此處編寫的段落中提供了一個垂直可滾動條。讓我們看看執行程式碼所得到的輸出。

您可以查看上面的輸出，可以看到我們有一個可垂直捲動的欄，可用於向下捲動。

注意 - 當我們使用overflow屬性時，需要指定「區塊元素」的元素，否則可能無法運作。由於該屬性主要用於剪輯內容或添加可滾動條（無論是垂直還是水平），因為正在使用的內容太大而無法容納指定區域。

讓我們看另一個例子來更好地理解這個屬性。

範例

在這個例子中，我們將把屬性的值設為auto，而不是改變屬性的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 id="Hi-This-another-example-of-the-verticallly-scrollable-div">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>

在上面的程式碼中，我們將overflow屬性的值從隱藏的x軸和自動的y軸改為auto，並使用相同的範例來查看我們的輸出結果。讓我們來看看這段程式碼將產生的輸出。

您可以查看上述輸出，可以看到即使在overflow屬性上使用了auto值，我們仍然有捲軸。