JSFiddle - React, Tailwind, and code Playground

HTML

<button id="enable">
  Enable scroll
</button>
<button id="disable">
  Disable scroll
</button>

CSS

html {
  height: 100%;
}

body {
  height: 200%;
}

.scroll-disabled {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

JavaScript

const { body, documentElement } = document;
let { scrollTop } = document.documentElement;

function disableScroll() {
  scrollTop = documentElement.scrollTop;
  body.style.top = `-${scrollTop}px`;
  body.classList.add("scroll-disabled");
}

function enableScroll() {
  body.classList.remove("scroll-disabled");
  documentElement.style.scrollBehavior = "auto";
  documentElement.scrollTop = scrollTop;
  documentElement.style.removeProperty("scroll-behavior");
  body.style.removeProperty("top");
}

document.getElementById('enable').addEventListener('click', enableScroll);
document.getElementById('disable').addEventListener('click', disableScroll);