JSFiddle - React, Tailwind, and code Playground

HTML

<div id=content>
  A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>
  <a onclick="disable_scrolling()">Disable Scroling</a><br>
  <a onclick="enable_scrolling()">Enable Scroling</a><br>
  I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
</div>

CSS

#content {
  line-height:200%;
}

#content a {
  text-decoration:underline;
  cursor:pointer;
}

JavaScript

var scroll_style_element;

function disable_scrolling(){
	
	// Create a style sheet we will only use to disable scrolling :
  scroll_style_element = document.createElement('style');
  document.head.appendChild(scroll_style_element);
  const scroll_style_sheet = scroll_style_element.sheet;
	
	scroll_style_sheet.insertRule('html{height:100%;overflow-y:hidden;}', scroll_style_sheet.cssRules.length);
}

function enable_scrolling(){
	if( scroll_style_element ) document.head.removeChild(scroll_style_element);
}