JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  Header - I'd like a scroll/mousewheel event here to be transfered to the container<br>
  <br>
  scroll me - nothing happens<br>
  <br>
  can this scroll/mousewheel event be transfered to the '.container' ?
</div>
<div id="container">
Container<br><br>scroll me - the container scrolls
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Just to create overflow
</div>

CSS

#header {
  position: absolute;
  top:0;
  left:0;
  right:0;
  height: 200px;
  background-color: #f88;
  
}

#container {
  position: absolute;
  top: 200px;
  left:0;
  right:0;
  bottom:0;
  background-color: #8f8;
  overflow-y: auto;
}

JavaScript

var container = document.getElementById('container');

container.addEventListener('mousewheel', function (e) {

console.log('container scroll Event dispatched');
  
  //Uncomment me for scroll to happen
   var scroll = $('#container').scrollTop()-e.wheelDeltaY;
        $('#container').scrollTop(scroll)
});

document.getElementById('header').addEventListener('mousewheel', function (e) {
var evt = document.createEvent('MouseEvents');
evt.initEvent(
  'mousewheel', // in DOMString typeArg,
   true,  // in boolean canBubbleArg,
   true  // in boolean cancelableArg,
 );
 evt.wheelDeltaY=e.wheelDeltaY;
	container.dispatchEvent(evt);
});