JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<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>
</body>

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');
});

document.getElementById('header').addEventListener('mousewheel', function (e) {
	container.dispatchEvent(e);
});