スクロールバーをモーダルウィンドウに追加する

Question

私はfullPage.jsに似たサイトを持っています。ページは画面のみをカバーし、他のスクロールバーは表示しません。しかし、このサイトには、さまざまな種類のコンテンツを持つモーダルウィンドウへのリンクが含まれています。私が疑問に思うのは、これらのモーダルをスクロール可能にすることがサイトの残りの部分を考慮しないと考えることが可能な場合です。

私が垂直スクロールバーを強制すると、私はサイト上でスクロールバーを取得しますが、何らかの理由でそれを使用することはできません。ここで

はモーダルウィンドウです：

$('#video-pop').click(function() { 
 
    $('#open-menu').fadeIn(350); 
 
}); 
 

 
$('#close-menu').click(function() { 
 
    $('#open-menu').fadeOut(350); 
 
});

#open-menu { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 60; 
 
    background: #060606; 
 
    display: none; 
 
} 
 

 
.menu-content { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#close-menu { 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="video-pop">OPEN PAGE</div> 
 
<div id="open-menu"> 
 
    <div class="menu-content"> 
 
    <div id="close-menu">CLOSE PAGE</div> 
 
    </div> 
 
</div>

JSFiddle：https://jsfiddle.net/neaqs3bv/

Answer 1

をopen-menuが画面の残りの部分を塗りつぶし、menu-contentがopen-menuを塗りつぶすため、スクロールバーが表示されません。つまり、スクロールする必要のあるオーバーフローはありません。

スクロールバーを表示するには、menu-contentの高さをopen-menuの高さより大きくし、overflow-y: autoをopen-menuに追加します。ここでは例です：

#open-menu { 
    position:fixed; 
    width:100%; 
    height: 50%; 
    z-index: 60; 
    background: #060606; 
    display: none; 
    overflow-y: auto; 
} 
.menu-content { 
    position: relative; 
    height: 500px; 
} 

#close-menu { 
    color: #fff; 
    padding-top: 250px; 
} 

https://jsfiddle.net/oze4wv1v/

Answer 2

あなた#open-menuがそのようなスクロールのスタイルを指定していることがありますよう

#open-menu { 
    /* ... your styles */ 
    overflow: hidden; 
    overflow-y: scroll; 
}