滚动百分比= math.round((window.scrolly / (math.max(document.body.scrollheight, document.documentelement.scrollheight) - document.documentelement.clientheight)) * 100)，需用 window.scrolly 和兜底总高，减去视口高度才得真实可滚动范围。
怎么用 window.scrollY 和 document.body.scrollHeight 算滚动百分比
浏览器本身不提供“当前阅读位置”的内置页码或百分比，得自己算。核心是拿已滚动距离除以总可滚动高度，再转成 0–100 的整数。
常见错误是直接用 document.documentElement.scrollTop —— 在某些 Chrome/Edge 模式下它可能为 0，而 window.scrollY 更稳定；总高度也别只看 document.body.scrollHeight，要取 Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)，否则在无 doctype 或 quirks 模式下会偏小。
-
window.scrollY是当前垂直滚动偏移量，兼容性好，IE9+ 都支持 - 总高度必须兜底：
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - 结果建议用
Math.round()而非Math.floor()，避免 99.6% 显示成 99%
const percent = Math.round((window.scrollY / (Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight)) * 100);
为什么 scrollHeight - clientHeight 才是有效滚动范围
很多人直接用 scrollHeight 当分母，结果百分比超过 100%，就是因为没减去视口高度 clientHeight。实际能滚动的距离是“全文高度减去一屏高度”，否则顶部刚加载时就显示 100%，逻辑就崩了。
这个差值才是真实可滚动空间，也是 window.scrollY 的最大合法值（理论上不会超过它）。
- 滚动到底部时：
window.scrollY === scrollHeight - clientHeight（近似成立） -
clientHeight要用document.documentElement.clientHeight，不是body.clientHeight，后者常为 0 或不准确 - 移动端需注意缩放、地址栏隐藏导致
clientHeight动态变化，建议节流后重算
用 IntersectionObserver 做“可视区域页码”更靠谱吗
如果目标不是连续百分比，而是类似“第 3 屏”“正在读第 5 节”，那硬算百分比反而失真。IntersectionObserver 可以监听多个 <section></section> 或 <article></article> 进入视口的状态，更适合做章节级定位。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但它不解决“当前读到全文百分之几”，只回答“哪一块正被看到”。和滚动百分比是两种需求，别混用。
- 适合场景：长文档分章节、博客带锚点导航、需要高亮当前小节
- 不适合场景：想显示“已读 73%”，因为交叠判断有延迟，且无法线性映射
- 触发回调时，
entries[0].intersectionRatio是该块可见比例，不是全文比例
iOS Safari 里 window.scrollY 有时不准怎么办
iOS Safari 在页面刚加载、地址栏未收起时，window.innerHeight 会临时变大，导致 scrollHeight - clientHeight 算出来偏小，百分比跳变甚至超 100%。这不是 bug，是 UI 行为。
最稳的解法不是等事件，而是监听 resize 并加防抖，同时每次计算前检查 window.scrollY 是否大于当前可滚动上限，手动 clamp。
- 用
setTimeout(() => {}, 0)延迟一次取值，避开初始渲染抖动 - 计算前加保护：
const clampedY = Math.min(window.scrollY, Math.max(0, scrollHeight - clientHeight)) - 不要依赖
DOMContentLoaded后立刻计算——DOM 加载完，但布局可能还没稳定
滚动位置提示看着简单，但跨端一致性、动态视口、初始状态这三块最容易漏掉校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
