<main>
  <div class="wrapper">
    <article class="flow">
      <div class="controls">
        <div>
          <label for="switcher">modal overscroll-behavior:</label>
          <select id="switcher">
            <option value="contain">contain</option>
            <option value="auto">auto</option>
            <option value="none">none</option>
          </select>
        </div>
      </div>
      <div>
        <!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Scroll in this modal</h2>
    <p>Cupcake tart cheesecake cake oat cake apple pie. Carrot cake fruitcake sugar plum dragée cotton candy fruitcake cookie. Shortbread tiramisu sugar plum marzipan shortbread soufflé. Chupa chups jelly-o gummies lollipop gummi bears caramels jelly beans jujubes dessert. Chocolate bar candy canes shortbread toffee bear claw shortbread cheesecake brownie. Jujubes chocolate bar chocolate bar pie icing. Wafer brownie sweet cotton candy bonbon candy canes liquorice cake toffee. Muffin croissant fruitcake shortbread wafer gummi bears chocolate cake gingerbread donut.</p>
  </div>

</div>
      </div>
    </article>
  </div>
</main>

:root {
  --var-overscroll-behavior: 'contain';
}

.modal-content {
  overscroll-behavior: var(--var-overscroll-behavior);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #272eb590;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 30px;
  border: 3px solid var(--color-primary-light);
  border-radius: 20px;
  width: 70%;
  height: 50%;
  overflow: auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: var(--color-primary-light);
  text-decoration: none;
  cursor: pointer;
}

main {
  height: 150vh;
}

let root = document.documentElement;
let overscroll= document.getElementById("switcher");
overscroll.addEventListener("change", function (evt) {
  root.style.setProperty('--var-overscroll-behavior', evt.target.value);
});

root.style.setProperty('--var-overscroll-behavior', 'contain');

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}