JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mydiv">test</div>
<div id="mydiv2">test2</div>

CSS

body { height: 1500px; }
#mydiv { width: 200px; height: 200px; background: #f00; }
#mydiv2 { width: 200px; height: 200px; background: #000; }

JavaScript

function lockScrolling(z, window) {


var window = window;
	var keys = {37: 1, 38: 1, 39: 1, 40: 1};

  function preventDefault(e,window) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;  
  }

  function preventDefaultForScrollKeys(e) {
      if (keys[e.keyCode]) {
          preventDefault(e);
          return false;
      }
  }

  function disableScroll(window) {
    if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove  = preventDefault; // mobile
    document.onkeydown  = preventDefaultForScrollKeys;
  }

  function enableScroll(window) {
      if (window.removeEventListener)
          window.removeEventListener('DOMMouseScroll', preventDefault, false);
      window.onmousewheel = document.onmousewheel = null; 
      window.onwheel = null; 
      window.ontouchmove = null;  
      document.onkeydown = null;  
  }



  if( typeof z == 'undefined' ) return;
			
      console.log( z );
      
			if( z != 'enable' )
				disableScroll() ;
			else
				enableScroll() ;
  
}

$('#mydiv').click( function(){ lockScrolling('enable', window) } );
$('#mydiv2').click( function(){ lockScrolling('disable', window) } );