div 滾動是一種在網頁設計中常見的效果，通過CSS樣式和原生JavaScript代碼實現。它可以在頁面中創建一個固定大小的容器，并在其中顯示大量內容，超出容器尺寸時通過滾動方式進行瀏覽。這種滾動效果可以增加頁面的可視面積，使用戶可以瀏覽更多的內容，提升用戶體驗。
下面將介紹幾個常見的div滾動效果案例，并給出相應的代碼示例來說明。
第一個案例是創建一個垂直滾動的div容器。以下是相關的CSS樣式和HTML結構：

<style>
.container {
width: 300px;
height: 200px;
overflow-y: scroll; 
}
</style>
<br>
<div class="container">
<p>這是第一段內容</p>
<p>這是第二段內容</p>
<p>這是第三段內容</p>
<p>這是第四段內容</p>
<p>這是第五段內容</p>
</div>

在上面的代碼中，通過設置容器的高度為200px，并將overflow-y屬性設置為scroll，創建了一個垂直滾動的div容器。當內容超過容器高度時，會顯示垂直滾動條，用戶可以通過滾動條瀏覽內容。
第二個案例是創建一個水平滾動的div容器。以下是相關的CSS樣式和HTML結構：

<style>
.container {
width: 300px;
white-space: nowrap;
overflow-x: scroll; 
}
.item {
display: inline-block;
width: 200px;
height: 150px;
background-color: lightblue;
margin-right: 10px; 
}
</style>
<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>

在上面的代碼中，通過設置容器的寬度為300px，并將overflow-x屬性設置為scroll，創建了一個水平滾動的div容器。在容器內部的子元素中，通過設置display為inline-block和white-space屬性為nowrap，創建了水平排列的元素。
第三個案例是使用原生JavaScript代碼實現滾動效果。以下是相關的CSS樣式和HTML結構：

<style>
.container {
width: 300px;
height: 200px;
overflow-y: scroll; 
}
</style>
<br>
<div class="container" id="scroll-container">
<p>這是第一段內容</p>
<p>這是第二段內容</p>
<p>這是第三段內容</p>
<p>這是第四段內容</p>
<p>這是第五段內容</p>
</div>
<br>
<script>
var container = document.getElementById("scroll-container");
container.scrollTop = 100;
</script>

在上面的代碼中，通過設置容器的高度為200px，并將overflow-y屬性設置為scroll，創建了一個垂直滾動的div容器。然后使用原生JavaScript代碼，通過設置scrollTop屬性為100，將滾動條滾動到指定位置。
通過以上幾個案例，我們可以看到使用CSS樣式和JavaScript代碼實現div滾動效果的方法。這些方法可以根據實際需求進行靈活的調整，從而滿足不同的設計要求。在實際開發中，我們可以根據具體的場景和需求選擇相應的方法，并結合其他網頁設計技術，創造出更加豐富多樣的滾動效果。