歌詞竟是好運旺來一起來，竟非大家，著實惶恐。

圖片來源：派星機
我也需要。這期發票又沒中。

本篇紀錄與前篇之wheel事件類似之不可思議事件scroll。

事件其十五：scroll

此事件如同wheel事件都與元素捲動有關，然scroll事件發生於元素被捲動之時，而wheel事件無需元素被捲動才發生，僅滾動鼠輩之鼠輪即發生。

因此若將前篇示例將觀測wheel事件更改為觀測scroll事件，則因滾輪無法被捲動而無法觀測到scroll事件。以下示例改造前篇示例，並觀測鼠之宅元素之scroll事件：

const houses = document.querySelectorAll(".house");

let angle = 0;

function rotateRoller() {
  angle++;
  const roller = this.querySelector(".roller");
  roller.style.transform = `rotate(${angle * 100}deg)`;
}

houses.forEach((house) => {
  house.addEventListener("scroll", rotateRoller);
});

分段註釋如下：
選取所有鼠之宅元素。

const houses = document.querySelectorAll(".house");

將函式之術名rotateRoller，內容更改為轉動鼠之宅內之滾輪。

let angle = 0;

function rotateRoller() {
  angle++;
  const roller = this.querySelector(".roller");
  roller.style.transform = `rotate(${angle * 100}deg)`;
}

對每一鼠之宅元素設定事件觀測器，進行scroll事件之觀測，並施以rotateRoller函式之術。

houses.forEach((house) => {
  house.addEventListener("scroll", rotateRoller);
});

上方之正常尺寸鼠之宅，因無法捲動，而無法觸發scroll事件，因此鼠輩之鼠輪滾動時無法轉動滾輪；下方之減高尺寸鼠之宅，可見鼠輩之鼠輪滾動時，捲動鼠之宅同時亦成功轉動滾輪。

示例處

將事件觀測器改回觀測wheel事件，以觀察上方之正常尺寸鼠之宅是否能正常作用：

houses.forEach((house) => {
  house.addEventListener("wheel", rotateRoller);
});

可確認上方之正常尺寸鼠之宅能於鼠輩之鼠輪滾動時轉動滾輪。下方之減高尺寸鼠之宅亦可。

wheel與scroll兩事件使用之區別請務必小心。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day16

翻譯

鼠輩：滑鼠
鼠輪：滾輪

相關連結

• scroll - MDN