update the progress bar's width when body.onscroll. (body's height is fixed)
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
html, body {
height: 300px;
overflow: scroll; /* โญ๏ธ ๅฟ
้ html, body ๅ
ฉ่
้ฝ่จญๅฎๆๆๆ๏ผไธ็ฅ็บไฝ๏ผ */
}