popup without scroll

by Alexander Zonov

HTML

<div class="page">
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="page-section"></div>
  <div class="popup-layer">
    <div class="popup">
      <button class="disable">disable scroll</button>
      <button class="enable">enable scroll</button>
    </div>
  </div>
</div>

CSS

.page {
  height: 4000px;
  position: relative;
}

.page-section {
  height: 200px;
}

.page-section:nth-of-type(2n) {
  background-color: #ededed;
}

.popup-layer {
  overflow: scroll;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.popup {
  display: block;
  height: 300px;
  width: 50%;
  margin: 10% auto 0 auto;
  background-color: red;
}

JavaScript

document.querySelector('.disable').addEventListener('click', () => {
	document.body.style.overflow = 'hidden';
})

document.querySelector('.enable').addEventListener('click', () => {
	document.body.style.overflow = 'visible';
})