根本原因是iOS Safari对滚动、高度计算和CSS特性的兼容性处理不一致：window.innerHeight不稳定，应改用document.documentElement.clientHeight；scroll-snap支持碎片化，须设mandatory并显式height: 100vh；JS翻页需统一用scrollTop或scrollY，配合Math.round和requestAnimationFrame确保精度。
HTML5课件在iPad上页码错乱，根本原因不是“导入方式”不对，而是页面加载顺序、CSS渲染时机和iOS Safari对position: fixed、transform、scroll-snap等特性的兼容性处理不一致导致的——尤其当课件依赖JS动态计算页高或监听scroll事件做翻页时，极易出错。
为什么iPad上window.innerHeight和实际可视区域不一致
iOS Safari在地址栏收起/展开、软键盘弹出、横竖屏切换时，会临时改变window.innerHeight值，但不会触发resize事件（或延迟触发），而很多HTML5课件用它来算单页高度，结果页码容器高度被算错，后续所有翻页逻辑偏移。
- 真实可用的可视高度应优先读取
document.documentElement.clientHeight，它更稳定 - 避免在
DOMContentLoaded阶段就缓存window.innerHeight；改用orientationchange+resize双监听，并加setTimeout(..., 100)防抖 - 若课件用
vh单位（如height: 100vh），iOS 15+已修复大部分问题，但iOS 13–14仍会把地址栏高度计入vh，此时必须用env(safe-area-inset-bottom)补正或降级为100%+min-height
scroll-snap-type在iPad上失效或跳页不准
iOS Safari对scroll-snap的支持存在碎片化：部分版本不响应scroll-snap-align: start，或在快速滑动后停在两个页面之间，造成页码显示为“1.5”“2.7”这类非整数。
- 必须给滚动容器设
scroll-snap-type: y mandatory（不能用proximity） - 每页子元素需带
scroll-snap-align: start且显式设置height: 100vh（不能靠flex: 1或min-height撑开） - 禁用
overflow: auto以外的滚动方式；若用iScroll或Swiper，确保启用mousewheel: false和disableTouchMoveOutside: true，否则手势冲突会导致页码错位
JS翻页逻辑里pageYOffset和scrollTop混用引发错乱
在iPad上，pageYOffset可能滞后于scrollTop（尤其页面有transform: translateY()动画时），若翻页判断同时读两者，页码会来回跳变。
立即学习“前端免费学习笔记（深入）”；
- 统一使用
element.scrollTop（针对自定义滚动容器）或window.scrollY（针对body滚动），不要交叉混用 - 计算当前页码时，用
Math.round(scrollTop / pageHeight)而非Math.floor，避免因小数精度导致-0.001被截成0页 - 每次滚动后，用
requestAnimationFrame(() => { /* 更新页码 */ })确保取值在渲染帧内，避开iOS的合成层延迟
const pageContainer = document.getElementById('pages');
const pageHeight = window.innerHeight;
function updatePageNumber() {
const scrollY = pageContainer.scrollTop;
const pageNum = Math.round(scrollY / pageHeight) + 1;
document.getElementById('page-num').textContent = pageNum;
}
pageContainer.addEventListener('scroll', () => {
requestAnimationFrame(updatePageNumber);
});
// 横竖屏适配
window.addEventListener('orientationchange', () => {
setTimeout(() => {
pageHeight = window.innerHeight;
}, 100);
});
真正卡住页码的，往往不是结构或样式，而是滚动事件监听时机、高度取值来源、以及iOS对scroll行为的“优化”——它会合并多次滚动，延迟派发事件。所以别信“只要用scroll-snap就自动好”，得亲手验证scrollTop是否实时、pageHeight是否被重写、requestAnimationFrame是否真在下一帧执行。
