在web開發中，經常需要用到滾動監聽。當頁面滾動到特定位置時，我們希望元素出現、消失或者改變樣式。今天我們來講一種比較常用的方法：通過監聽鼠標滾輪事件來改變CSS。

//獲取滾動的元素
let el = document.getElementById('scroll-el');
//監聽鼠標滾輪事件
el.addEventListener('mousewheel', (event) => {
//獲取滾動的距離
let amount = event.wheelDeltaY;
//改變元素樣式
el.style.top = (parseInt(el.style.top) + amount) + "px";
});

以上代碼首先獲取想要監聽滾動的元素，這里我們用一個ID為"scroll-el"的元素作為例子。接著使用addEventListener()來監聽"mousewheel"事件。當鼠標滾輪動作發生時，event.wheelDeltaY屬性將返回滾動的距離。通過獲取到的距離，可以對元素進行樣式的改變。

假設我們的元素原來設置的是top: 0px，當向下滾動時我們想要將它移動向下，可以將元素的樣式修改為：el.style.top = (parseInt(el.style.top) + amount) + "px"。上面的代碼中，parseInt()函數將top屬性轉為數值類型，并且加上鼠標滾動距離，最后加上"px"作為單位。

通過鼠標滾輪事件監聽來改變CSS，可以實現很多有趣的效果。例如：制作一個上下滾動的菜單欄，當滾動到一定高度時會自動固定在頁面頂部。還可以制作有趣的頁面背景動畫等等。

總的來說，通過監聽鼠標滾輪事件來改變CSS是一種簡單而實用的方法，對于自定義頁面效果非常有幫助。