圖片來源：YouTube
就像小垃圾永遠不嫌多。

本篇紀錄與前篇之scroll事件相關之不可思議事件scrollend。

事件其十六：scrollend

此事件發生於元素捲動結束之時。元素捲動結束之定義為捲動之位置已無更新，且使用者捲動行為已結束。

另注意，safari無法使用此事件。

以下示例結合觀測scroll事件，針對全介面觀測scrollend事件並施以無盡之鼠之術。

const sevens = document.querySelectorAll(".seven");
const container = document.querySelector(".container");

function showPicture() {
  sevens.forEach((seven) => {
    const currentViewBottom = this.scrollY + this.innerHeight;
    const sevenPosition = seven.offsetTop + seven.offsetHeight / 2;

    if (currentViewBottom > sevenPosition) {
      seven.style.opacity = 1;
    }
  });
}

function addSeven() {
  const newSeven = document.createElement("img");
  newSeven.setAttribute("class", "seven new");
  newSeven.setAttribute("src", "./seven_mochi.png");
  container.insertBefore(newSeven, container.lastChild);
}

window.addEventListener("scroll", showPicture);
window.addEventListener("scrollend", addSeven);

分段註釋如下：
選取所有鼠元素及容器元素。

const sevens = document.querySelectorAll(".seven");
const container = document.querySelector(".container");

定義函式之術，各名為showPicture及addSeven，內容分別為顯示圖片及增加小七鼠。

其中showPicture函式之術法為偵測鼠輩捲動之位置底部
const currentViewBottom = this.scrollY + this.innerHeight;
是否超過小七鼠圖之位置一半處
const sevenPosition = seven.offsetTop + seven.offsetHeight / 2;
若有，則顯示此小七鼠圖
if (currentViewBottom > sevenPosition) { seven.style.opacity = 1; }

function showPicture() {
  sevens.forEach((seven) => {
    const currentViewBottom = this.scrollY + this.innerHeight;
    const sevenPosition = seven.offsetTop + seven.offsetHeight / 2;

    if (currentViewBottom > sevenPosition) {
      seven.style.opacity = 1;
    }
  });
}

function addSeven() {
  const newSeven = document.createElement("img");
  newSeven.setAttribute("class", "seven new");
  newSeven.setAttribute("src", "./seven_mochi.png");
  container.insertBefore(newSeven, container.lastChild);
}

設定二觀測器，對於全介面window觀測scroll與scrollend事件，期望當鼠輩捲動時發生scroll事件以顯示小七鼠，鼠輩結束捲動時發生scrollend事件於底部增加一小七鼠。

window.addEventListener("scroll", showPicture);
window.addEventListener("scrollend", addSeven);

首先觀察鼠輩捲動到小七鼠圖之一半位置時，顯示可愛小七鼠圖。

示例處

而鼠輩結束捲動行為後，可由右下之捲軸觀得新生之高度，此即為新生之小七鼠。而鼠輩繼續捲動並結束捲動，又可獲得一新生鼠，此為無盡之鼠之術。

此真為無盡？若觀者捲之以耐心，則可得意外之喜。鼠巴拉喜。

示例之術式

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

翻譯

鼠輩：滑鼠
鼠輪：滾輪

相關連結

• scrollend - MDN
• scroll - MDN