在JavaScript中，我們可以使用addEventListener方法為元素添加事件監聽器。對于滾輪事件，我們需要監聽wheel事件。以下是一個簡單的示例，展示了如何使用JavaScript處理滾輪事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾輪事件示例</title>
<style>
.scroll-container {
height: 200px;
overflow-y: scroll;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="scroll-container" id="scrollContainer">
滾動此容器以觸發滾輪事件
</div>
<script>
// 獲取滾動容器元素
const scrollContainer = document.getElementById('scrollContainer');
// 定義滾輪事件處理函數
function handleWheel(event) {
// 阻止默認行為，如瀏覽器自帶的滾動效果
event.preventDefault();
// 獲取滾輪的方向和距離
const deltaY = event.deltaY;
// 根據滾輪方向和距離執行相應操作
if (deltaY > 0) {
console.log('向上滾動');
} else {
console.log('向下滾動');
}
}
// 為滾動容器添加滾輪事件監聽器
scrollContainer.addEventListener('wheel', handleWheel);
</script>
</body>
</html>
在這個示例中，我們創建了一個名為scrollContainer的可滾動容器。當用戶在容器內滾動時，handleWheel函數會被調用。這個函數會阻止瀏覽器的默認滾動行為，并根據滾輪的方向（向上或向下）執行相應的操作。
