<div> 滾動屬性是指在 HTML 中使用 <div> 標簽時，可以通過設置不同的 CSS 屬性來實現內容的滾動效果。通過滾動屬性，我們可以控制內容的滾動方向、滾動條的可見性以及滾動條的樣式等等。本文將通過幾個代碼案例來詳細解釋和說明 <div> 滾動屬性的使用方法。

案例一：

在這個案例中，我們將創建一個固定高度和寬度的 <div> 元素，并將其內容設置為超出 <div> 區域，從而觸發滾動效果。

<div style="width: 300px; height: 200px; overflow: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed faucibus lectus. Etiam eros ligula, placerat sit amet mauris vitae, iaculis venenatis orci. Praesent in quam suscipit, fermentum urna et, imperdiet lectus. Fusce gravida nibh nec tempus semper.</p>
<p>Quisque ante libero, scelerisque vitae suscipit ut, pellentesque dictum eros. Suspendisse potenti. In vitae risus tincidunt, ultricies purus et, rhoncus lectus. Aenean maximus mollis ex ac tempus.</p>
<p>Vestibulum lacinia feugiat mi, ut pulvinar tortor tristique at. Duis cursus ligula sit amet viverra tristique. Donec eu lacinia nisl. Etiam ac felis leo. Nunc eu lectus enim. Etiam feugiat, lacus vel hendrerit tempor, diam magna lacinia nulla, eleifend rutrum arcu nunc vel lacus.</p>
</div>

在上述代碼中，我們設置了 <div> 的寬度為 300 像素，高度為 200 像素，并通過 overflow 屬性將溢出的內容進行滾動顯示。當內容超過 <div> 的可見區域時，會自動生成垂直和水平方向的滾動條。

案例二：

在這個案例中，我們將展示如何只在需要時顯示滾動條。

<style>
.scrollable-div {
width: 300px;
height: 200px;
overflow: auto;
}
<br>
        .scrollable-div::-webkit-scrollbar {
width: 5px;
}
<br>
        .scrollable-div::-webkit-scrollbar-thumb {
background-color: #888;
}
</style>
<br>
    <div class="scrollable-div">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>

在上述代碼中，我們設置了一個 <div> 元素，通過將 overflow 屬性設置為 auto，只在內容溢出時顯示滾動條。我們還使用了 CSS 的偽元素選擇器 -webkit-scrollbar 和 -webkit-scrollbar-thumb 來自定義滾動條的樣式。

：

使用 <div> 滾動屬性可以實現內容的滾動效果，并通過不同的 CSS 屬性來控制滾動方向、滾動條的可見性以及滾動條的樣式等。以上的代碼案例提供了基本的使用方法，通過調整屬性值和樣式，可以實現更豐富的滾動效果。