Question

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

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

Answer 1

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

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

Answer 2

您可以尝试以下步骤：

1）添加新的CSS类：

.bodyNoOverflow{
    overflow:hidden;
}

2）修改Featherlight小部件初始化配置，并将beforeOpen和beforeClose回调函数修改为：

beforeOpen: function(event){

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

beforeClose: function(event){

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

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

2 个答案: