在網頁設計與開發中，經常會有需要將某個區域內的內容進行滾動展示，而不是整個頁面的滾動。這種情況下，可以通過使用 div 元素來實現單獨滾動的效果。div 是 HTML 中的一個基本元素，表示文檔中的一個區域塊。下面將通過幾個代碼案例詳細解釋說明如何實現 div 的單獨滾動效果。
案例一：基本 div 單獨滾動 在這個案例中，我們將創建一個包含長內容的 div 元素，并對其樣式進行設置，使其在超出容器高度時出現滾動條。具體代碼如下所示：
在上面的代碼中，我們創建了一個容器元素，帶有一個類名為 "container" 的 div 元素。然后，通過設置容器的寬度和高度，以及 overflow 屬性為 "auto"，當 div 中的內容超過容器高度時，將會出現縱向滾動條。
案例二：添加滾動條樣式 在上一個案例的基礎上，我們可以對滾動條進行樣式調整，以適應頁面的整體風格。下面的代碼示例展示如何對滾動條進行樣式設置：
在上述代碼中，我們添加了一些滾動條的樣式設置。通過設置 ::-webkit-scrollbar 對滾動條進行樣式的設置，例如設置了滾動條的寬度、滑塊的背景顏色和邊框半徑，以及滾動條背景的顏色。
案例三：水平滾動 有時候，我們也需要針對橫向內容進行水平滾動，而不僅僅局限于縱向滾動。這時，我們可以設置 div 的 white-space 屬性為 nowrap，然后在其中添加足夠寬度的內容。下面是一個示例代碼：
在上面的代碼中，我們通過設置 div 的 white-space 屬性為 nowrap，使得內部的內容不會折行。然后，通過設置 div 的 overflow-x 屬性為 auto，當內容超過容器寬度時，將會出現橫向滾動條。添加了一個 item 類，用于展示每個水平滾動的元素。
通過以上幾個案例，我們可以看到如何使用 div 元素來實現單獨滾動的效果。在實際項目中，可以根據具體需求進行樣式與功能的調整，以滿足不同的設計要求。
案例一：基本 div 單獨滾動 在這個案例中，我們將創建一個包含長內容的 div 元素，并對其樣式進行設置，使其在超出容器高度時出現滾動條。具體代碼如下所示：
<pre>html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<br>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan ligula ac turpis vulputate, vel feugiat turpis venenatis. Fusce lacinia sapien eget urna cursus, at dapibus felis auctor. Sed elementum fringilla augue at condimentum. Donec lectus orci, viverra sit amet pretium non, tristique in enim. Mauris porta tellus sit amet nulla varius elementum. Fusce sit amet accumsan nisi. Aliquam eleifend diam at lectus interdum, nec iaculis dui rhoncus. Quisque et auctor est. Aenean ac aliquet tortor, eu efficitur enim. Etiam porttitor tellus et venenatis suscipit.</p>
</div>
<br>
</body>
</html>在上面的代碼中，我們創建了一個容器元素，帶有一個類名為 "container" 的 div 元素。然后，通過設置容器的寬度和高度，以及 overflow 屬性為 "auto"，當 div 中的內容超過容器高度時，將會出現縱向滾動條。
案例二：添加滾動條樣式 在上一個案例的基礎上，我們可以對滾動條進行樣式調整，以適應頁面的整體風格。下面的代碼示例展示如何對滾動條進行樣式設置：
<pre>html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
overflow: auto;
}
/* 設置滾動條的樣式 */
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
}
.container::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<br>
<div class="container">
<p>這是一段長內容，我們將對其進行滾動展示以保持頁面整潔。這是一段長內容，我們將對其進行滾動展示以保持頁面整潔。這是一段長內容，我們將對其進行滾動展示以保持頁面整潔。</p>
</div>
<br>
</body>
</html>在上述代碼中，我們添加了一些滾動條的樣式設置。通過設置 ::-webkit-scrollbar 對滾動條進行樣式的設置，例如設置了滾動條的寬度、滑塊的背景顏色和邊框半徑，以及滾動條背景的顏色。
案例三：水平滾動 有時候，我們也需要針對橫向內容進行水平滾動，而不僅僅局限于縱向滾動。這時，我們可以設置 div 的 white-space 屬性為 nowrap，然后在其中添加足夠寬度的內容。下面是一個示例代碼：
<pre>html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 150px;
overflow-x: auto;
white-space: nowrap;
}
.item {
display: inline-block;
width: 200px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<br>
</body>
</html>在上面的代碼中，我們通過設置 div 的 white-space 屬性為 nowrap，使得內部的內容不會折行。然后，通過設置 div 的 overflow-x 屬性為 auto，當內容超過容器寬度時，將會出現橫向滾動條。添加了一個 item 類，用于展示每個水平滾動的元素。
通過以上幾個案例，我們可以看到如何使用 div 元素來實現單獨滾動的效果。在實際項目中，可以根據具體需求進行樣式與功能的調整，以滿足不同的設計要求。
上一篇css實現左側寬度固定
下一篇CSS實現多色線條