<div> 是HTML中的一個標簽，用于創建一個容器，可用于包含其他元素。在某些情況下，我們可能希望在一個 <div> 容器中顯示一個滾軸，使內容可以滾動以適應容器的大小。這樣可以在有限的空間內容納更多內容，并為用戶提供更好的瀏覽體驗。本文將通過幾個代碼案例詳細解釋如何使用 <div> 顯示滾軸，并參考其他文章中的真實案例。
，我們來看一下如何使用CSS來實現一個帶有滾軸的 <div> 容器。我們可以通過設置容器的高度和溢出屬性來實現這個效果。下面是一個基本的示例：

示例1：

<div class="scroll-container" style="height: 200px; overflow-y: scroll;">
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
<p>內容4</p>
<p>內容5</p>
<p>內容6</p>
<p>內容7</p>
<p>內容8</p>
<p>內容9</p>
<p>內容10</p>
</div>

在上面的示例中，我們設置了容器的高度為200px，并且使用了overflow-y: scroll;來實現垂直滾動條。如果容器中的內容超過了容器的高度，用戶就可以通過滾動條來查看隱藏的內容。
除了使用 CSS，我們還可以使用 JavaScript 來添加滾軸到一個 <div> 容器中。下面是一個簡單的JavaScript示例：

示例2：

<div id="scroll-container">
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
<p>內容4</p>
<p>內容5</p>
<p>內容6</p>
<p>內容7</p>
<p>內容8</p>
<p>內容9</p>
<p>內容10</p>
</div>
<br>
    <script>
var container = document.getElementById("scroll-container");
container.style.overflowY = "scroll";
container.style.height = "200px";
</script>

在上面的示例中，我們使用 JavaScript 獲取了具有指定 id 的 <div> 元素，并通過設置元素的樣式來添加滾軸。同樣地，我們設置了容器的高度為200px，并且使用overflow-y: scroll;來實現垂直滾動條。
接下來，我們來看一個案例，使用一些實際的網頁來展示如何在 <div> 中顯示滾軸。以下是來自W3Schools的一個實例：

示例3：

<div style="width: 400px; height: 400px; overflow-y: scroll;">
<iframe src="https://www.w3schools.com" style="width: 100%; height: 100%;"></iframe>
</div>

在上述示例中，我們在一個 <div> 中嵌入了一個來自W3Schools的網頁。通過設置容器的高度和overflow-y: scroll;屬性，如果網頁內容超過了容器的高度，用戶就可以通過滾軸來瀏覽整個網頁。
在本文中，我們通過幾個代碼案例詳細解釋了如何使用 <div> 顯示滾軸。我們介紹了使用CSS和JavaScript的方法，并參考了其他文章中的真實案例。無論是在一個固定的大小容器中顯示大量內容，還是在嵌入其他網頁的容器中添加滾軸，<div> 加上合適的樣式和屬性都可以很好地滿足我們的需求。希望本文能幫助您更好地理解和應用 <div> 顯示滾軸的技術。