JavaScript 是一種廣泛應用于 Web 開發的編程語言，它能夠實現眾多 Web 功能，其中包括鼠標滾動事件。鼠標滾動事件是指在鼠標在瀏覽器窗口內滾動時觸發的一種事件。這種事件與傳統的鼠標點擊事件不同，可以為 Web 用戶提供更加靈活和便捷的交互方式。

鼠標滾動事件的實現主要是通過 JavaScript 提供的 {@pre addEventListener} 方法來完成的。以下是一個簡單的實例，用于演示如何在文檔加載后監聽鼠標滾動事件：

document.addEventListener('scroll', function(e) {
// 處理滾動事件
});

上例中，{@pre document.addEventListener} 方法將一個事件監聽器綁定到文檔的滾動事件上。當用戶在瀏覽器窗口中滾動時，事件監聽器將會被調用，并將 {@pre e} 參數傳遞給其回調函數。{@pre e} 參數是一個包含事件信息的對象，其中包括事件類型、觸發元素、以及滾動位置等信息。

鼠標滾動事件的應用非常廣泛。例如，在實現自定義滾動條時，我們可以借助鼠標滾動事件來控制滾動條的位置。以下是一個簡單的滾動條示例：

// 創建一個滾動條元素
var scrollbar = document.createElement('div');
scrollbar.style.position = 'absolute';
scrollbar.style.top = 0;
scrollbar.style.right = 0;
scrollbar.style.width = '10px';
scrollbar.style.background = 'gray';
scrollbar.style.borderRadius = '5px';
// 添加滾動條
document.body.appendChild(scrollbar);
// 監聽鼠標滾動事件
document.addEventListener('scroll', function(e) {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var scrollHeight = document.documentElement.scrollHeight;
// 計算滾動條位置
var ratio = scrollTop / (scrollHeight - clientHeight);
var top = (clientHeight - 10) * ratio;
// 更新滾動條位置
scrollbar.style.top = top + 'px';
});

上例中，我們首先創建一個名為 {@pre scrollbar} 的滾動條元素，并將其添加到文檔中。然后，我們在文檔上監聽鼠標滾動事件，計算滾動條的位置并更新其樣式。這樣，在用戶滾動瀏覽器窗口時，滾動條可以跟隨移動。

總之，鼠標滾動事件是 JavaScript 中的一個重要功能，它可以為 Web 應用提供靈活的交互方式。通過使用 {@pre addEventListener} 方法，我們可以輕松地監聽鼠標滾動事件，并實現各種有趣和實用的功能。