全屏轮播图需综合解决视口适配、图片失真、滚动穿透、全屏退出等关键问题：用 object-fit: cover 防变形，position: fixed 避滚动干扰，监听 fullscreenchange 响应全屏状态，touchstart/touchmove 阻止默认滚动，并在交互时暂停自动轮播。
全屏轮播图不是靠 width: 100vw; height: 100vh 简单撑开就能稳住的——它必须同时解决视口适配、图片拉伸失真、滚动穿透、键盘/手势退出等真实问题。
用 object-fit: cover 防止图片变形拉伸
直接给 width: 100%; height: 100vh 会导致图片被强行挤压。正确做法是让图片“覆盖”容器，自动裁剪多余部分：
-
object-fit: cover是关键，它保持宽高比并填满容器，类似 CSS 背景的background-size: cover - 避免用
contain（会留白）或fill（必变形） - 如果用
srcset，确保每个cover裁剪位置会跳变
用 position: fixed 避免页面滚动干扰
轮播图区域若用 position: relative + height: 100vh，当页面有其他内容时，用户滚动可能触发“滚动穿透”，导致轮播图跟着动或卡顿。更稳妥的方式是固定定位：
.fullscreen-slider {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
overflow: hidden;
}
-
fixed让轮播图脱离文档流，彻底无视父容器或页面滚动 - 务必加
overflow: hidden，防止图片溢出或过渡动画错位 - 注意：如果轮播图需要随页面一起滚动（比如作为首屏模块而非真正全屏），那就不能用
fixed，改用min-height: 100vh+object-fit
处理浏览器全屏 API 与 Esc 退出逻辑
用户按 F11 或调用 requestFullscreen() 进入全屏后，轮播图需响应 fullscreenchange 事件重新计算尺寸；Esc 退出时也应恢复状态：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
// 退出全屏：可重置定时器、暂停视频、恢复 body 滚动
clearTimeout(autoPlayTimer);
document.body.style.overflow = 'auto';
}
});
- 不要监听
keydown判断Escape键——浏览器全屏退出由系统接管，fullscreenchange才是唯一可靠钩子 - 移动端没有 F11，但
requestFullscreen()在 iOS Safari 中受限（需用户手势触发），Android Chrome 支持较好 - 若轮播图内含
，记得在进入全屏时调用video.webkitEnterFullscreen()（iOS）或video.requestFullscreen()（其他）
轮播切换时禁用 body 滚动并防抖点击
手指在轮播图上滑动切换时，若未阻止默认行为，容易触发页面整体滚动，尤其在 iOS Safari 上：
let isDragging = false;
slider.addEventListener('touchstart', (e) => {
isDragging = true;
e.preventDefault(); // 阻止初始滚动
});
slider.addEventListener('touchmove', (e) => {
if (isDragging) e.preventDefault();
});
slider.addEventListener('touchend', () => {
isDragging = false;
});
- 仅靠
touch-action: pan-y不够——它只限制原生手势方向，无法阻止快速滑动时的页面跟随 - 切换按钮（如左右箭头）需加
pointer-events: none在过渡中，防止连点触发多次切换 - 自动轮播的
setInterval必须在用户交互（hover / touch）时清除，并在交互结束后重启，否则会和手动切换冲突
真正稳定的全屏轮播图，90% 的坑不在动画逻辑，而在视口生命周期管理——从进入全屏、响应 resize、拦截手势，到退出时清理定时器和样式，每一步都得对浏览器行为有明确预期。
