如何通过遮罩模态框阻止页面滚动？

问题出在Locomotive Scroll采用的是自定义滚动机制，并非依赖浏览器原生滚动行为，所以直接给body加overflow: hidden完全不起作用。你需要用它自带的API来控制滚动状态：

1. 首先初始化Locomotive Scroll时保存实例：

// 假设你的滚动容器是带[data-scroll-container]属性的元素
const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

2. 修改你的点击事件逻辑，用scroll.stop()和scroll.start()来切换滚动状态，替代给body加类的方式：

$('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay').toggleClass('open');
    
    // 根据遮罩状态切换滚动
    if ($('#overlay').hasClass('open')) {
        scroll.stop();
        // 额外处理触摸设备，防止滑动穿透
        document.querySelector('[data-scroll-container]').style.touchAction = 'none';
    } else {
        scroll.start();
        document.querySelector('[data-scroll-container]').style.touchAction = '';
    }
});

3. （可选）如果需要配合样式增强效果，可以给滚动容器加禁止滚动的类，而不是body：

.scroll-stop {
    overflow: hidden !important;
    touch-action: none !important;
}

对应的JS调整为：

$('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay').toggleClass('open');
    const scrollContainer = $('[data-scroll-container]');
    
    scrollContainer.toggleClass('scroll-stop');
    scrollContainer.hasClass('scroll-stop') ? scroll.stop() : scroll.start();
});

核心逻辑就是：Locomotive Scroll自己掌控滚动过程，必须调用它的API才能真正暂停/恢复滚动，原生的CSS属性对它的自定义滚动无效。

内容的提问来源于stack exchange，提问作者Evilcampbell