✨scroll me

browser ⟩ event ⟩ type ⟩ scroll ⟩ example ⟩ scroll me

example of onscroll event handler.

💈範例

replit ⟩ scroll me , require -> Node+ext, Element+boxes

const { log } = console

// ⭐️ import
import { $ } from './js/ext/Node_ext.js';     // Node + ext
import { } from './js/ext/Element+boxes.js';  // Element + boxes
// --------------------------------------------------------------------

// elements
const divScroll = $("#scroll-box");    // Node + ext
const output = $("#output");
const button = $("button");

// ⭐️ event handlers
// -------------------------------------------------------

// button.onclick
button.onclick = () => {
    log(divScroll.scrollBox.info);    // Element + boxes
    log(divScroll.paddingBox.info);
};

// divScroll.onscroll
divScroll.onscroll = () => {
    output.innerHTML = "🔥 Scroll event fired!";
    setTimeout(() => {
        output.innerHTML = "💤 Waiting on scroll events ...";
    }, 1000);
};

📘 手冊

• Event ⟩

  • Element: scroll event ⭐️

  • Element: scrollend event - when scroll has ended.

  • Document: scroll event

📗 參考

• 你所不知道的 scroll 事件：为什么 scroll 事件会失效？

• Eloquent JS ⟩ Scroll Events