打开灯箱时防止背景滚动

Question

我正在使用Featherlight作为灯箱。我遇到的问题是打开灯箱时背景仍然可以滚动。大多数灯箱需要的修复方法是将类添加到上，并在其中添加overflow:hidden;。

如何在打开灯箱时执行此操作，然后在关闭时移除这个类呢？

- Rob

---

https://github.com/noelboss/featherlight/#configuration - 这部分文档揭示了所有可以绑定的回调函数，以实现此目的... - Samuil Petrov

你不想使用overflow:hidden，因为它会隐藏滚动条并可能导致重绘（这很慢）。 - Andrew Bone

安德鲁！我看到你对滚动条被隐藏并导致重绘非常在意（因为你已经在这里的问题和下面的两个答案中发布了相同的内容：）你有更好的解决方案吗？ - Rick Davies

Answer 1

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

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

- RWAM

---

这也会隐藏滚动条并可能导致重绘。 - Andrew Bone

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
},

- vijayP

---

这也会隐藏滚动条并可能导致重绘。 - Andrew Bone