停止し、スタートページオーバーフロー/クリックして上にスクロールする機能

背景：
私はチュートリアルhereを使用して（HTML、CSS、JS）ライトボックスを作成しました。ライトボックスのオーバーレイdivが表示されているとき（ボタンがクリックされたとき）、スクロールバーの機能を停止します。そうすれば、誰かがライトボックス内の画像を見てページ上にいるとき、ページの別の部分にスクロールすることはできません。その後、ライトボックスを閉じると、スクロールバーの機能が再び有効になり、自由にスクロールできます。私はそれを行う正しい方法を見つけるように見えることができません。停止し、スタートページオーバーフロー/クリックして上にスクロールする機能

私はこの試みた：

$(document).css('overflow-y', 'hidden');

をしかし、私は私のコードに追加したときに何も起こりませんでした。まるで私がそれを加えなかったかのようだった。

質問：
ライトボックスがアップしているときに、ページオーバーフロー能力を停止し、それが閉じているときに、それを再度有効にする方法はありますか？

ご迷惑をおかけして申し訳ありません。私はJavaScriptが初めてです。

Javascriptを：

function startLightBox() { 
    var lbBg = document.getElementById("lightBoxBg"); 
    var lb = document.getElementById("lightBox"); 
    var screenTop = $(document).scrollTop(); 
    var currentMid = $(document).scrollTop() + 250; 

    $('#lightBoxBg').css('top', screenTop); 
    $('#lightBox').css('top', currentMid); 

    lbBg.style.display = "block"; 
    lb.style.display = "block"; 
} 

function dismiss() { 
    var lbBg = document.getElementById("lightBoxBg"); 
    var lb = document.getElementById("lightBox"); 
    var screenTop = $(document).scrollTop(); 
    var currentMid = $(document).scrollTop() + 250; 


    $('#lightBoxBg').css('top', screenTop); 
    $('#lightBox').css('top', currentMid); 
    lbBg.style.display = "none"; 
    lb.style.display = " none"; 
}

CSS：

#lightBoxBg { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    opacity: 0.5; 
    display: none; 
    background-color: #000000; 
    height: 100%; 
    width: 100%; 
} 

#lightBox { 
    position: absolute; 
    top: 50%; 
    left: 40%; 
    display: none; 
}

HTMLボディ

<body> 

    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
     <div class="col-lg-6"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-12"> 

     <button onclick="startLightBox()">Light Box</button> 

     </div> 

    </div> 
    </div> 

    <div id="lightBoxBg" onclick="dismiss()"> 

    </div> 
    <div id="lightBox"> 
    <img src="test2.png" /> 
    </div> 
</body>

出典

2016-09-11 JustBlossom

あなたはオベを変更する必要がありますセレクタのrflow html, body、あなたは直接制御することはできませんdocumentのCSS - documentは要素ではありません。ここで

は例です：

var toggled = false; 
 
$('.visible').on('click', 'button', function() { 
 
    toggled = !toggled; 
 
    $(this).text((toggled ? 'Enable' : 'Disable') + ' scrolling'); 
 
    $('body, html').css('overflow', toggled ? 'hidden' : ''); 
 
});

body { 
 
    background-image: linear-gradient(to bottom, white, black); 
 
    height: 140vh; 
 
    position: relative; 
 
} 
 

 
.visible, .invisible { 
 
    position: absolute; 
 
    color: red; 
 
} 
 

 
.visible { 
 
    top: calc(100vh - 2rem); 
 
} 
 

 
.invisible { 
 
    top: calc(140vh - 2rem); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="visible">Visible <button>Disable scrolling</button></div> 
 
<div class="invisible">Invisible</div>

出典

2016-09-11 13:23:30 casraf

startLightBox()機能で使用$("body").css("overflow", "hidden");

this-

jqueryのを試してみてください。

dismiss()には$("body").css("overflow", "auto");を使用してください。 startLightBox()機能で

Javascriptを

使用

document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only

。

そしてdismiss()機能に

document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only

を使用しています。

出典

2016-09-11 13:34:57 SreYash

ありがとうございます！それは私を解決に近づけました。私は、ライトボックスを閉じた後、スクロールバーを戻すために、dismiss（）関数でdocument.documentElement.style.overflow = 'scroll'を設定しなければなりませんでした。それ以外の場合は、ボタンをクリックすると、スクロールバーが消えて永久に消えてしまいます（そして、ライトボックスを閉じた後に再びスクロールできるようにしたい）。あなたが答えでそれを変えたいなら、私はそれをマークします。 – JustBlossom

停止し、スタートページオーバーフロー/クリックして上にスクロールする機能

答えて

関連する問題