<div滾軸是一種CSS屬性，用于在網頁中創建可滾動的固定大小區域。它可以在內容超出可視區域時，自動創建垂直或水平的滾動條，以便用戶可以滾動內容并訪問被隱藏的部分。 <div>元素是HTML中最常用的容器元素，可以用來包裹其他HTML元素，并通過CSS樣式來控制其外觀和布局。使用<div>滾軸可以實現各種交互效果，如展示長列表、顯示圖像庫、顯示聊天歷史等。下面將通過幾個代碼案例來詳細解釋和說明<div>滾軸的用法。</div>

案例一：創建垂直滾動條

<code><div class="scroll-container">
<div class="scroll-content">
<p>這是一段很長很長的文本內容。</p>
<p>這是一段很長很長的文本內容。</p>
<p>這是一段很長很長的文本內容。</p>
<p>這是一段很長很長的文本內容。</p>
<p>這是一段很長很長的文本內容。</p>
</div>
</div>
</code>

案例二：創建水平滾動條

<code><div class="scroll-container">
<div class="scroll-content" style="width: 600px;">
<img src="image.jpg" alt="圖片1">
<img src="image.jpg" alt="圖片2">
<img src="image.jpg" alt="圖片3">
<img src="image.jpg" alt="圖片4">
<img src="image.jpg" alt="圖片5">
</div>
</div>
</code>

案例三：自定義滾動條樣式

<code><style>
.scroll-container {
width: 300px;
height: 300px;
overflow: auto;
}
<br>
  .scroll-content::-webkit-scrollbar {
width: 8px;
}
<br>
  .scroll-content::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 4px;
}
<br>
  .scroll-content::-webkit-scrollbar-track {
background-color: #eee;
}
</style>
<br>
<div class="scroll-container">
<div class="scroll-content">
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
<li>列表項5</li>
</ul>
</div>
</div>
</code>

<div>：通過以上案例，我們可以看到使用CSS的<div>滾軸屬性可以輕松地創建出垂直或水平滾動的區域。我們可以通過設置容器元素的大小和添加合適的CSS樣式來控制滾動條的外觀和行為。這為我們提供了更多的靈活性和自定義性，使得我們能夠根據具體需求來實現各種滾動效果。</div>