<div>標簽是HTML中常用的容器標簽，用于定義文檔中的一個區塊。在網頁設計中，我們經常需要在一個<div>中顯示大量的內容，而不希望占用過多的頁面空間。這時，可以使用<div>的滾動（scroll）功能來實現這一需求。通過設置<div>的樣式屬性，使其在顯示內容超出容器高度時出現滾動條，用戶可以通過滾動條來查看整個內容。本文將詳細介紹<div>的滾動用法，并給出幾個代碼案例以供參考。

案例一：

<div style="width: 200px; height: 200px; overflow: scroll;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut porttitor augue. In hac habitasse platea dictumst. Vestibulum faucibus eros est, nec tempor lorem pulvinar at. Phasellus vitae ultrices tortor, at aliquam dui. Etiam vehicula neque at diam finibus, sit amet vulputate dolor efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras semper leo eu elit euismod tristique. Suspendisse vel sollicitudin nisi. Vivamus bibendum elementum lacus, ac sagittis risus placerat et. Integer vitae diam dui. Fusce pharetra elementum justo ut rhoncus. In ullamcorper, justo nec condimentum volutpat, libero nibh tempor nisi, in malesuada sem nulla et neque.

</div>

在上述案例中，我們創建了一個寬度為200px、高度為200px的<div>容器，并使用了overflow: scroll;的樣式屬性。該屬性的作用是當容器內內容超出容器的高度時，顯示滾動條。用戶可以通過滾動條來滾動查看超出部分的內容。

案例二：

<div style="width: 200px; height: 200px; overflow-y: scroll;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut porttitor augue. In hac habitasse platea dictumst. Vestibulum faucibus eros est, nec tempor lorem pulvinar at. Phasellus vitae ultrices tortor, at aliquam dui. Etiam vehicula neque at diam finibus, sit amet vulputate dolor efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras semper leo eu elit euismod tristique. Suspendisse vel sollicitudin nisi. Vivamus bibendum elementum lacus, ac sagittis risus placerat et. Integer vitae diam dui. Fusce pharetra elementum justo ut rhoncus. In ullamcorper, justo nec condimentum volutpat, libero nibh tempor nisi, in malesuada sem nulla et neque.

</div>

在上述案例中，我們同樣創建了一個寬度為200px、高度為200px的<div>容器。不同的是，我們使用了overflow-y: scroll;的樣式屬性。該屬性的作用是只在垂直方向上出現滾動條，即使內容在水平方向上超出容器的寬度也不會出現滾動條。

案例三：

<div style="width: 200px; height: 200px; overflow-x: scroll;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut porttitor augue. In hac habitasse platea dictumst. Vestibulum faucibus eros est, nec tempor lorem pulvinar at. Phasellus vitae ultrices tortor, at aliquam dui. Etiam vehicula neque at diam finibus, sit amet vulputate dolor efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras semper leo eu elit euismod tristique. Suspendisse vel sollicitudin nisi. Vivamus bibendum elementum lacus, ac sagittis risus placerat et. Integer vitae diam dui. Fusce pharetra elementum justo ut rhoncus. In ullamcorper, justo nec condimentum volutpat, libero nibh tempor nisi, in malesuada sem nulla et neque.

</div>

在上述案例中，我們同樣創建了一個寬度為200px、高度為200px的<div>容器。不同的是，我們使用了overflow-x: scroll;的樣式屬性。該屬性的作用是只在水平方向上出現滾動條，即使內容在垂直方向上超出容器的高度也不會出現滾動條。

<div>的滾動功能在網頁設計和開發中非常實用，可以幫助我們優化頁面布局并提升用戶體驗。通過上述的幾個代碼案例，希望讀者們可以掌握<div scroll用法，并能根據實際需求靈活運用。