# HTML5如何禁止滚动 在网页开发中，有时需要临时或永久禁止页面滚动（例如弹窗出现时或全屏游戏场景）。HTML5提供了多种实现方式，本文将介绍6种常用方法及其适用场景。 ## 1. CSS overflow属性法 最直接的方式是通过CSS控制`<body>`元素的溢出行为： ```css body { overflow: hidden; /* 隐藏滚动条并禁止滚动 */ height: 100vh; /* 可选：固定视口高度 */ } 优点：实现简单，无JavaScript依赖
缺点：可能引起布局偏移（CLS）
结合JavaScript动态控制滚动状态：
document.body.classList.add('no-scroll'); // CSS配套样式 .no-scroll { overflow: hidden; position: fixed; /* 防止页面跳动 */ width: 100%; } 通过拦截滚动事件实现：
document.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false }); 注意：需要设置passive: false才能生效
针对移动端触摸滚动需额外处理：
document.addEventListener('touchmove', (e) => { e.preventDefault(); }, { passive: false }); 通过meta标签控制：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 局限：仅适用于移动端，且会禁用缩放功能
如果需要恢复滚动位置，推荐以下方案：
let scrollPosition = 0; function disableScroll() { scrollPosition = window.pageYOffset; document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; document.body.style.top = `-${scrollPosition}px`; } function enableScroll() { document.body.style.removeProperty('overflow'); document.body.style.removeProperty('position'); document.body.style.removeProperty('top'); window.scrollTo(0, scrollPosition); } <html>和<body>的滚动选择方案时应根据具体场景权衡实现复杂度和浏览器兼容性（IE10+支持大部分方法）。 “`
（全文约560字）
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
