防止在打开灯箱时背景滚动

Question

我正在使用 Featherlight 作为灯箱。我遇到的一个问题是它打开后，背景仍然可滚动。大多数灯箱需要的修复方法是在正文中添加一个 class，上面有 overflow:hidden;。

如何在打开灯箱时执行此操作，然后在关闭时删除 class？

Answer 1

您可以使用 beforeOpen 和 afterClose 选项在插件调用中使用这些选项，例如：

$.featherlight({
    beforeOpen: function() {
        document.body.style.overflow = 'hidden';
    },
    afterEnd: function() {
        document.body.style.overflow = '';
    }
});

Answer 2

您可以尝试以下步骤：

1) 添加新的 CSS class 为：

.bodyNoOverflow{
    overflow:hidden;
}

2）修改Featherlight widget初始化配置，修改beforeOpen和beforeClose回调函数为：

beforeOpen: function(event){

    $("body").addClass("bodyNoOverflow");
    //existing code if any
},

beforeClose: function(event){

    $("body").removeClass("bodyNoOverflow");
    //existing code if any
},

防止在打开灯箱时背景滚动

Prevent background scrolling on open of lightbox

css

jquery

featherlight.js