資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 使 Div 垂直滾動
我們網站上可能要使用的內容可能會非常龐大，佔用大量空間，這意味著網站的其他元素可能會被移位，從而影響網站的響應速度。為了避免這種情況，需要為使用者提供可滾動的內容，以便使用者如有興趣可以向下滾動以閱讀全部內容。
在本文中，我們將瞭解如何使 div 垂直滾動以及我們將使用什麼屬性來實現。
如何使 div 垂直滾動？
overflow 屬性可用於使 DIV 垂直滾動，因為它可以在 overflow 屬性中輸入多個值。例如 hidden 和 auto。我們可以根據使用值建立水平和垂直捲軸。如果我們使用 auto 值，則可以獲得垂直捲軸。讓我們看看 overflow 屬性的語法。
語法
overflow:hidden/visible/clip/scroll/auto/inherit;
我們將使用 x 軸和 y 軸，然後可以將 x 軸的屬性設定為 hidden，y 軸設定為 auto，這將隱藏水平捲軸，只有垂直捲軸可見，並且我們將自動獲得所需的 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 軸更改為 hidden，y 軸更改為 visible，這使我們在我們在這裡編寫的段落中獲得了垂直捲軸。讓我們看看執行程式碼後將獲得的輸出。
您可以檢視上面的輸出，並看到我們有一個垂直捲軸，可用於向下滾動。
注意 - 當我們使用 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>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 屬性的值更改為 auto，而不是將 x 軸設定為 hidden 和 y 軸設定為 auto，並使用了相同的示例來檢視我們的輸出是什麼。讓我們看看從此程式碼生成的輸出。
您可以檢視上面的輸出，並看到即使在 overflow 屬性上使用 auto 值後，我們仍然有捲軸。
結論
overflow 屬性被廣泛用於裁剪內容，如果內容佔用太多空間。或者，如果我們想新增一個捲軸以供使用者向下滾動，從而減少其在網頁上佔用的整體空間。
在本文中，我們瞭解瞭如何使用 overflow 屬性以及如何為 div 新增垂直捲軸，以及有關 overflow 屬性中使用值的更多資訊。
482 次檢視
