> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/scroll/scroll-me.md).

# scroll me

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ 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 -> [Node+ext](/web/browser/dom/type/node/+ext.md), [Element+boxes](/web/browser/dom/type/element/+boxes.md)

```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 %}