ライトボックスの開いた状態での背景スクロールの防止

Question

ライトボックスとしてFeatherlightを使用しています。私が持っている1つの問題は、それが開かれたことです、背景はスクロール可能なままです。ほとんどのライトボックスが必要とする修正は、ボディにクラスを追加することです。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とを変更しますコールバック関数として：

beforeOpen: function(event){ 

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

beforeClose: function(event){ 

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