フロントdivがスクロールされている間にバックグラウンドdivスクロールを一時的に無効にするにはどうすればよいですか？

Question

私は2つのdiv、正面に1つ、背面に1つあります。前面がポップアップするのは、ボタンを押したときだけです。フロントdivが表示されていない場合は、バックグラウンドdivをスクロールすることができます。逆に、フロントdivが表示されている場合、バックグラウンドdivスクロールは無効になります。しかし、フロントのdivはまだスクロールすることができます。

私は、バックグラウンドのdivに無スクロールCSSを適用することで、CSSを使って試してみました。

.no-scroll { 
    position: fixed; 
    overflow: hidden 
} 

しかし、要素にノースクロールクラスを適用するたびに、トップに戻るようにバウンスされます。

私も this article

を追った。しかし、それはあまりにも全体のウィンドウのスクロールともフォントのdivを無効にします。なにか提案を？

Answer 1

"blur"というイベントのバックグラウンドdivにイベントリスナーを追加して、スタイルの変更をトリガーして、ブロックに "overflow：hidden"スタイルを設定できます。

バックグラウンドdivが前面に戻るのを防ぐためにZ-インデックスを使用することもできます。より高いz-インデックスをフロントdivに置くだけで良いはずです。

Answer 2

私はコンテナとそのトグルクラスの両方のdivをラップする必要があると思います。この

var btn = document.querySelector('button'), 
 
    wrapper = document.querySelector('.wrapper'); 
 

 
btn.addEventListener('click', function(){ 
 
    wrapper.classList.toggle('modal-is-visible'); 
 
});

html, body { height: 100% } 
 

 
.wrapper { 
 
    height: 500px; 
 
    overflow: scroll; 
 
    border: solid 2px black; 
 
    padding: 2rem; 
 
} 
 

 
.lower_div { 
 
    background: red; 
 
    width: 100%; 
 
    
 
    height: 600px; 
 
    position: relative; 
 
} 
 

 

 
.modal { 
 
    display: none; 
 
    height: 20px; 
 
    width: 100%; 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: tomato; 
 
} 
 

 
.modal-is-visible .modal { display: block;} 
 

 
.modal-is-visible.wrapper { overflow: hidden; }

<button> 
 
toggle 
 
</button> 
 
<div class="wrapper"> 
 
    <div class="lower_div"> 
 
    <div class="modal"> 
 
    </div> 
 
    </div> 
 
</div>