防止後臺滾動打開燈箱

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 Widget初始化配置並修改beforeOpen和beforeClose回調函數爲：

beforeOpen: function(event){ 

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

beforeClose: function(event){ 

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