前端弹窗遮罩层背景滚动锁定方案详解

CSS 配合：

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

优缺点： 兼容性好，逻辑清晰。但在 iOS 上若页面有底部固定导航栏可能出现布局错乱，且软键盘弹出时 fixed 定位可能失效。

方案二：Fixed 定位补偿法

将 body 变为 fixed 定位，宽度设为 100%，配合 JS 计算偏移量还原位置。此方案需同时操作 body 和 html，并补偿滚动条宽度以防页面抖动。

class ScrollLockManager {
    constructor() {
        this.scrollY = 0;
        this.bodyStyleCache = null;
        this.htmlStyleCache = null;
        this.isLocked = false;
    }
    lock() {
        if (this.isLocked) return;
        this.scrollY = window.scrollY;
        const body = document.body;
        const html = document.documentElement;
        
        this.bodyStyleCache = body.getAttribute('style');
        this.htmlStyleCache = html.getAttribute('style');
        
        // 计算滚动条宽度，避免页面横向抖动
        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
        
        html.style.overflow = 'hidden';
        html.style.height = '100%';
        
        body.style.position = 'fixed';
        body.style.top = `-${this.scrollY}px`;
        body.style.left = '0';
        body.style.right = '0';
        body.style.width = '100%';
        body.style.height = '100%';
        body.style.overflow = 'hidden';
        body.style.paddingRight = `${scrollBarWidth}px`;
        
        this.isLocked = true;
    }
    unlock() {
        if (!this.isLocked) return;
        const body = document.body;
        const html = document.documentElement;
        
        body.style.cssText = this.bodyStyleCache || '';
        html.style.cssText = this.htmlStyleCache || '';
        
        requestAnimationFrame(() => {
            window.scrollTo(0, this.scrollY);
        });
        this.isLocked = false;
    }
}

框架集成示例：

// Vue3 组合式函数
import { onMounted, onUnmounted, watch } from 'vue';
export function useScrollLock(isLocked) {
    const manager = new ScrollLockManager();
    watch(isLocked, (locked) => {
        if (locked) manager.lock();
        else manager.unlock();
    });
    onUnmounted(() => {
        if (manager.getState().isLocked) manager.unlock();
    });
}

// React Hook
import { useEffect } from 'react';
export function useBodyScrollLock(isLocked) {
    useEffect(() => {
        if (isLocked) {
            new ScrollLockManager().lock();
        } else {
            new ScrollLockManager().unlock();
        }
        return () => {
            if (document.body.style.overflow === 'hidden') {
                document.body.style.overflow = '';
            }
        };
    }, [isLocked]);
}

方案三：Touchmove 事件拦截

通过监听遮罩层的 touchmove 事件并阻止默认行为，精准拦截背景滚动，同时允许弹窗内容区滚动。适用于移动端，PC 端可配合 CSS 降级。

class TouchScrollLock {
    constructor() {
        this.overlay = null;
        this.startY = 0;
        this.isLocked = false;
        this.passiveSupported = false;
    }
    checkPassiveSupport() {
        try {
            const opts = Object.defineProperty({}, 'passive', {
                get: () => { this.passiveSupported = true; return true; }
            });
            window.addEventListener('test', null, opts);
            window.removeEventListener('test', null, opts);
        } catch (e) {
            this.passiveSupported = false;
        }
    }
    init(overlayElement) {
        this.checkPassiveSupport();
        this.overlay = overlayElement;
        const eventOptions = this.passiveSupported ? { passive: false } : false;
        
        this.overlay.addEventListener('touchmove', this.handleOverlayTouchMove, eventOptions);
        this.overlay.addEventListener('click', (e) => {
            if (e.target === this.overlay && this.closeModal) this.closeModal();
        });
    }
    handleOverlayTouchMove = (e) => {
        if (e.target === this.overlay) {
            e.preventDefault();
            return;
        }
        const content = e.target.closest('.modal-scroll-content');
        if (content) {
            const isAtTop = content.scrollTop <= 0;
            const isAtBottom = content.scrollTop + content.clientHeight >= content.scrollHeight;
            const currentY = e.touches[0].clientY;
            const isScrollingUp = currentY > this.startY;
            const isScrollingDown = currentY < this.startY;
            if ((isAtTop && isScrollingUp) || (isAtBottom && isScrollingDown)) {
                e.preventDefault();
            }
        }
    }
    setupContentScroll(contentElement, eventOptions) {
        contentElement.addEventListener('touchstart', (e) => {
            this.startY = e.touches[0].clientY;
        }, eventOptions);
    }
    lock() {
        if (this.isLocked) return;
        if ('ontouchstart' in window) {
            document.body.style.overflow = 'hidden';
            document.body.classList.add('modal-open');
        } else {
            document.body.style.overflow = 'hidden';
            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
            document.body.style.paddingRight = `${scrollBarWidth}px`;
        }
        this.isLocked = true;
    }
    unlock() {
        if (!this.isLocked) return;
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';
        document.body.classList.remove('modal-open');
        this.isLocked = false;
    }
}

CSS 优化：

.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}
.modal-content {
    background: white;
    border-radius: 12px;
    max-height: 80vh;
    width: 90%;
    max-width: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

方案选择与终极策略

实际开发中建议采用特性检测 + 分层处理：

1. iOS Safari: 优先使用 overscroll-behavior 配合 fixed 定位。
2. Android: 优先使用 touchmove 事件拦截。
3. PC/旧设备: 使用 body 属性锁定。

class UltimateScrollLock {
    constructor() {
        this.strategy = null;
        this.init();
    }
    init() {
        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        const supportsOverscroll = CSS.supports('overscroll-behavior', 'contain');
        
        if (isIOS && supportsOverscroll) {
            this.strategy = new IOSStrategy();
        } else {
            this.strategy = new FallbackStrategy();
        }
    }
    lock() { return this.strategy.lock(); }
    unlock() { return this.strategy.unlock(); }
}

常见坑点与排查

1. 软键盘干扰： 移动端 input 获取焦点时，fixed 定位的 body 可能被顶起。需监听 resize 事件并在键盘收起后重置滚动位置。
2. 样式污染： 第三方库可能覆盖 body 样式。可使用 MutationObserver 监控 body 样式变化并防御性恢复。
3. Z-Index 层级： 确保遮罩层 z-index 高于其他元素，注意父元素的 stacking context 可能影响层级。
4. 内存泄漏： 组件卸载时需清理全局事件监听器。

调试技巧：

• 可视化滚动位置显示。
• 检测所有层叠上下文。
• 捕获阶段监听滚动事件以排查来源。

总结

解决弹窗滚动穿透问题需要综合考虑浏览器内核、设备类型及交互细节。通过合理选择锁定方案、处理边界情况（如软键盘、滚动条宽度）以及做好兼容性测试，可以显著提升用户体验。