# scroll progress on body [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 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](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 { viewport } from './js/ext/Element+boxes.js'; // Element + boxes // -------------------------------------------------------------------- // elements const html = document.documentElement; // const body = document.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="" %} {% endtab %} {% tab title="👥 相關" %} * [scroll-progress](https://lochiwei.gitbook.io/web/browser/event/type/scroll/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) * [ ] [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) ⟩ * [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 %}