弹窗出现时禁止页面滚动需设置body为overflow:hidden并保存scrollY值，关闭时恢复overflow和滚动位置，同时可监听键盘事件阻止滚动穿透，推荐用CSS类.no-scroll统一管理。
弹窗出现时禁止页面滚动，关键在于控制 body 元素的 overflow 样式，并保存当前滚动位置，避免弹窗关闭后页面跳动。
1. 弹窗显示时锁死滚动
在打开弹窗（如点击按钮触发）时，给 body 添加样式 overflow: hidden，同时记录当前 scrollY 值，用于后续恢复：
function openModal() {
const scrollY = window.scrollY;
document.body.style.overflow = 'hidden';
document.body.dataset.scrollY = scrollY; // 临时存起来
// 显示弹窗元素（例如设置 class 或 display）
document.getElementById('modal').classList.add('show');
}2. 弹窗关闭时恢复滚动
关闭弹窗前，先还原 body 的 overflow，并手动滚动回之前的位置，防止页面“闪一下”或错位：
function closeModal() {
const scrollY = document.body.dataset.scrollY;
document.body.style.overflow = '';
delete document.body.dataset.scrollY;
window.scrollTo(0, parseInt(scrollY) || 0);
document.getElementById('modal').classList.remove('show');
}3. 防止键盘滚动穿透（可选但推荐）
用户按空格、方向键或 PageDown 仍可能触发背景滚动。可在弹窗显示时监听 keydown 并阻止默认行为（仅限 body 上）：
立即学习“Java免费学习笔记（深入）”；
let modalKeyDownHandler = null;
<p>function openModal() {
// ...前面的逻辑
modalKeyDownHandler = (e) => {
if ([' ', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(e.key)) {
e.preventDefault();
}
};
document.body.addEventListener('keydown', modalKeyDownHandler);
}</p><p>function closeModal() {
// ...前面的逻辑
if (modalKeyDownHandler) {
document.body.removeEventListener('keydown', modalKeyDownHandler);
}
}4. 更健壮的写法：用 CSS 类统一管理
比起直接操作 style，建议定义一个 CSS 类（如 .no-scroll），通过切换类名来控制，便于维护和复用：
/* CSS */
.no-scroll {
overflow: hidden;
}JS 中只需：
document.body.classList.add('no-scroll');
// 关闭时
document.body.classList.remove('no-scroll');这样更清晰，也方便配合 transition 或媒体查询做响应式处理。
