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 - the scroll is 'tranfered' to the container but it appears to 'shock' rather than the smooth scroll you get if the browser would perform the scroll.<br>
</div>
<div id="container">
Container<br><br>scroll me - the container scrolls smooth (the way the browser does it)
<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;
  padding: 10px;
  height: 200px;
  background-color: #f88;
}

#container {
  position: absolute;
  top: 200px;
  left:0;
  right:0;
  bottom:0;
  padding: 10px;
  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.scrollTop = container.scrollTop+e.deltaY;
});