ファンシーボックスのスライドで垂直スクロールバーがスライドしないようにします

スライドのイベント中にブラウザの垂直スクロールバーが表示されると、ファンシーボックスのスライドと共に移動する問題が発生しました。コードスニペットを実行する場合は、垂直スクロールバーが表示されるように高さを調整し、次に/前のファンシーボックスボタンをクリックして、スクロールバーのスクロール動作を観察します。ファンシーボックスのスライドで垂直スクロールバーがスライドしないようにします

$(".fancybox").fancybox({ 
 
    type: "inline", 
 
    speed: 2000 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" /> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> 
 
</head> 
 
<body> 
 
    <a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 1</a><br> 
 
    <a class="fancybox" data-fancybox="modal" data-src="#modal" href="javascript:;">Inline Content 2</a> 
 

 
    <div id="modal" style="display: none; padding: 50px 5vw; max-width: 800px;text-align: center;"> 
 
    <h3>Login to Join The Community</h3> 
 
    <p>This is a sample login form, but you may put any HTML here.</p> 
 
    </div> 
 
</body> 
 
</html>

これはバグですか？回避策に関する考えはありますか？私が前にスライド移行後にスクロールバーを表示/非表示にしようとしたが、これは動作しませんでした：

$(".fancybox").fancybox({ 
    type: "inline", 
    speed: 2000, 

    beforeMove: function (instance, slide) { 
     document.body.style.overflow = "hidden"; 
    }, 

    afterMove: function (instance, slide) { 
     document.body.style.overflow = ""; 
    } 
});

出典

2017-03-24 reformed

を、私はこの解決策を見つけるために管理微調整のビットの後、私はより良い1のわからないけれども、実際のスライドの（と前のスライドの）要素や隠しへのアクセス/ CSS overflow経由で自分のスクロールバーを示す含まれている：

$(".fancybox").fancybox({ 
    type: "inline", 

    beforeMove: function (instance, slide) { 
     // Hide scrollbar for fancybox bug fix 
     instance.slides[instance.prevIndex].$slide.css("overflow", "hidden"); 
     slide.$slide.css("overflow", "hidden"); 
    }, 

    afterMove: function (instance, slide) { 
     // Restore scrollbar for fancybox bug fix 
     instance.slides[instance.prevIndex].$slide.css("overflow", ""); 
     slide.$slide.css("overflow", ""); 
    } 
});

出典

2017-03-24 21:46:47 reformed

はねえ、私は、fancybox 3.1.20に** afterMove **見つけることができない、彼らは削除されましたそれ？スライドが左右に動いたときに何かする必要があります...これにはイベントがありますか？どのような考えが大いに評価されるだろう:) – awebartisan

@awebartisan [公式ドキュメント]（http://fancyapps.com/fancybox/3/docs/）の「イベント」セクションを見てください。このイベントが** afterShow **に置き換えられたようです。 – reformed

** beforeShow **イベント – awebartisan

ファンシーボックスのスライドで垂直スクロールバーがスライドしないようにします

答えて

関連する問題