> 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-progress.md). # scroll progress [browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ scroll ⟩ example ⟩ scroll progress {% hint style="success" %} update the progress bar's width [onscroll](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). (body's height is automatic) {% endhint %} {% tabs %} {% tab title="💈範例" %} * replit ⟩ [scroll progress](https://replit.com/@pegasusroe/scroll-the-page#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(500); // ⭐️ event handlers // ------------------------------------------------------- // window.onscroll window.addEventListener("scroll", () => { // same as: `html.scrollHeight - innerHeight` const maxScroll = html.scrollBox.height - viewport.height; // Element+boxes const currentScroll = viewport.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}`; }); ``` {% endtab %} {% tab title="🗺️ 圖表" %} {% embed url="" %} {% endtab %} {% tab title="👥 相關" %} * [scroll progress on body](/web/browser/event/type/scroll/scroll-progress-on-body.md) - body's height is fixed. {% 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 %}