# scroll progress on body [browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ 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 -> [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 { 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](/web/browser/event/type/scroll/scroll-progress.md) - 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 %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://lochiwei.gitbook.io/web/browser/event/type/scroll/scroll-progress-on-body.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.