# scroll me

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [event](https://lochiwei.gitbook.io/web/browser/event) ⟩ [type](https://lochiwei.gitbook.io/web/browser/event/type) ⟩ scroll ⟩ example ⟩ scroll me  

{% hint style="success" %}
example of [onscroll](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event) event handler.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
replit ⟩ [scroll me](https://replit.com/@pegasusroe/scroll-me#index.js) ,  require -> [+ext](https://lochiwei.gitbook.io/web/browser/dom/type/node/+ext "mention"), [+boxes](https://lochiwei.gitbook.io/web/browser/dom/type/element/+boxes "mention")

```javascript
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);
};
```

{% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ 
  * [Element: scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event) ⭐️ 
  * [Element: scrollend event](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) - when scroll has ended.
  * [Document: scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event)
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] [你所不知道的 scroll 事件：为什么 scroll 事件会失效？](https://ayase.moe/2018/11/20/scroll-event/)
* [ ] Eloquent JS ⟩ [Scroll Events](https://eloquentjavascript.net/15_event.html#h_xGSp7W5DAZ) 
  {% endtab %}
  {% endtabs %}