<div>元素是HTML中常見的容器元素，用于將網頁內容劃分為不同的部分。而CSS（層疊樣式表）用于控制網頁的樣式和布局。在網頁設計中，經常會遇到需要通過滾輪來實現特定效果的需求，如滾動導航、滑動圖片展示等。本文將介紹如何使用CSS來實現滾輪效果，并通過幾個代碼案例詳細解釋說明。

案例一：滾動導航

滾動導航是指當用戶滾動頁面時，導航欄的樣式會跟隨滾動位置的改變而發生變化，以提升用戶的交互體驗。下面是一個滾動導航的示例代碼：

<code>
<style>
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
transition: background-color 0.5s; /* 添加漸變效果 */
}
<br>
      #navbar.scrolled {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
<br>
    <script>
window.addEventListener('scroll', function() {
var navbar = document.getElementById('navbar');
if (window.pageYOffset > 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
</script>
<br>
    <div id="navbar">
<!-- 導航欄內容 -->
</div>
</code>

在上述代碼中，我們通過CSS設置導航欄的基本樣式，并使用名為#navbar.scrolled的選擇器來定義滾動時導航欄的樣式。通過JavaScript代碼監聽窗口的滾動事件，根據滾動的偏移量來決定是否為導航欄添加scrolled類名，從而改變其樣式。

案例二：滑動圖片展示

滑動圖片展示是一種通過滾輪操作來切換圖片的效果。下面是一個滑動圖片展示的示例代碼：

<code>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
<br>
      .slider img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s; /* 添加漸隱效果 */
}
<br>
      .slider img.active {
opacity: 1;
}
</style>
<br>
    <script>
window.addEventListener('wheel', function(event) {
var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var currentImageIndex = Array.from(images).findIndex(function(image) {
return image.classList.contains('active');
});
<br>
        if (event.deltaY > 0) {
images[currentImageIndex].classList.remove('active');
images[(currentImageIndex + 1) % images.length].classList.add('active');
} else {
images[currentImageIndex].classList.remove('active');
images[(currentImageIndex - 1 + images.length) % images.length].classList.add('active');
}
});
</script>
<br>
    <div id="slider" class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<!-- 圖片展示 -->
</div>
</code>

在上述代碼中，我們使用CSS設置了一個帶有滾動容器的樣式，并對圖片進行了定位、尺寸和過渡動畫的設置。通過JavaScript代碼監聽鼠標滾輪事件，根據滾輪的滾動方向和當前活動圖片的索引，來確定下一張要激活的圖片，并將相應的類名添加到該圖片上，從而實現滑動圖片展示的效果。

通過以上兩個案例，我們可以看到如何使用CSS和JavaScript來實現通過滾輪來實現不同效果的功能。滾輪作為用戶交互的一種方式，可以為網頁增添更多的互動和視覺效果，提升用戶體驗。在實際開發中，可以根據實際需求靈活運用滾輪效果，為網頁設計增添更多的創意和驚喜。