Scroll fix and flipcard stack

I have a flip card where i have put an iframe on the flip side and i want to prevent the front view from scrolling the iframe before resuming normal scroll process. how can I achieve this with JavaScript ?

Prevent from scrolling iframe in flip front for mobile device on touch scroll. Css solution didn't work and now I would like some JavaScript that can help me achieve this for every .flip-box-front

fieldset {
 height:200px;}

.card {
 position: relative; 
 width: 100%;
 height: 100%;
 transition: transform 1s;
 transform-style: preserve-3d;
}

 .flip-box-front, .flip-box-back {  
 position: absolute; 
 width: 100%; 

 border:0.5px solid #72bcd4; 
 border-radius:12px;  
 padding: 2px;  
 -webkit-backface-visibility: hidden; 
 backface-visibility: hidden;
}

 .flip-box-front {
 background-color: #fff;
 color: black;

}


.flip-box-back {transform: rotateY(180deg);}


.flip-box-back  iframe { 
 
 border: 0px none; 
 
 frame-border: 0px ;

 margin-height: 0px;
 
 
 } 

.card.is-flipped {transform: rotateY(180deg);}

<fieldset>
<legend>header title </legend>

<div class="card">

<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>

<div class="flip-box-back">

<iframe  src="https://ee-3.blogspot.com">
</iframe>
</div>

</div>
</div>
</fieldset>

<br/>

<fieldset>
<legend>header title </legend>
<div class="card">

<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>

<div class="flip-box-back">

<iframe  src="https://ee-3.blogspot.com">
</iframe>
</div>

</fieldset>

var cards =   document.querySelectorAll('.card');

  cards.forEach(card => {
    card.addEventListener('click', function() {
 
  card.classList.toggle('is-flipped');
  
  
  });
  
})

Adding a z-index to .flip-box-front solved this problem.

.flip-box-front {
  background-color: #fff;
  color: black;
  z-index: 2;
}