# scroll progress on body

[browser](../../..) ⟩ [event](../..) ⟩ [type](..) ⟩ scroll ⟩ example ⟩ scroll progress on body

{% hint style="success" %}
update the progress bar's width when body.[onscroll](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). (body's height is fixed)
{% endhint %}

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

```javascript
const { log } = console

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

// elements
const html = document.documentElement;     // <HTML>
const body = document.body;                // <BODY>
const bar = $("#progress");                // Node + ext
const info = $("#info");
const content = $('#content');

content.textContent = "supercali fragilisti cexpiali docious ".repeat(200);

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

// body.onscroll (⭐️ windown/html.onscroll also works❗)
body.addEventListener("scroll", () => {
    const maxScroll = body.scrollBox.height - body.paddingBox.height; // Element+boxes
    const currentScroll = body.scrollBox.y;                           // Element+boxes
    const percent = (currentScroll / maxScroll) * 100;
    // update UI
    bar.style.width = `${percent}%`;
    bar.textContent = `${percent.toFixed(0)}%`;
    info.textContent = `scroll amout: ${currentScroll} / max: ${maxScroll}`;
}, true);            // ⭐️ capturing: true (important❗)
// -> see: https://ayase.moe/2018/11/20/scroll-event/
```

📁 CSS

```css
html, body {
    height: 300px;
    overflow: scroll;    /*  ⭐️ 必須 html, body 兩者都設定才有效，不知為何？  */
}
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="https://replit.com/@pegasusroe/scroll-progress-1#index.js" %}
{% endtab %}

{% tab title="👥 相關" %}
* [scroll-progress](scroll-progress "mention") - body's height is automatic.
{% 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)&#x20;
* [ ] [HTML vs Body: How to Set Width and Height for Full Page Size](https://www.freecodecamp.org/news/html-page-width-height/)
{% endtab %}

{% tab title="📘 手冊" %}
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩&#x20;
  * [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 %}
{% endtabs %}
