title: Transfer a mousewheel/scroll event from one div to another
body: <p>I would like to know <strong>if it's possible</strong> and <strong>how</strong> to transfer a mousewheel/scroll event (scroll attempt by a user) from the <code>header</code> to the <code>container</code>.</p>
  
  <p>I have the following example situations:</p>
  
  <pre><code>+------------+     +------------+|
  |   header   |     |   header   ||
  +------------+     +------------+|
  |           ||     |            ||
  |           ||     |            ||
  | container ||     | container  ||
  |           ||     |            ||
  |           ||     |            ||
  +------------+     +------------+|
   situation 1        situation 2
  </code></pre>
  
  <hr>
  
  <h2>Situations</h2>
  
  <hr>
  
  <p>Situation 2 is the 'traditional' setup in which the complete page can be scrolled. When your cursor hovers the header (even though it might be fixed) the scroll attempt is passed along to the body/html. Since the container overflows the body/html the container will move/scroll if a user rotates his/her mousewheel. Because the header is fixed it will stay at the same position.</p>
  
  <p>Situation 1 is my test setup. The container's content overflows the container which will cause the container to show a scrollbar. Now i'd like for the container to also scroll when a user's cursor is hovering the header and the user rotates his/her scrollwheel.</p>
  
  <h2>Update 1</h2>
  
  <p>a jsfiddle of <a href="https://jsfiddle.net/hkpr6zd6/4/" rel="noreferrer">situation 1</a></p>
  
  <p>a jsfiddle of <a href="https://jsfiddle.net/Lkg96rhp/1/" rel="noreferrer">situation 2</a></p>
  
  <h2>Update 2</h2>
  
  <p>I've created another <a href="https://jsfiddle.net/9hydg8sx/" rel="noreferrer">fiddle</a> to show my progress in which may lie the solution, only I can't get it to work. This might inspire someone else to get the actual solution :)
  I get the error: <code>(index):69 Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.</code>
  (For now it's only the scroll event in chrome) </p>
  
  <h2>Update 3</h2>
  
  <p><a href="https://jsfiddle.net/9hydg8sx/8/" rel="noreferrer">This</a> comes closest to my expected solution which is based on 'Other Solution 2'. Thanks to Maksym Stepanenko's research it does not seem to be possible yet. I leave the question unanswered for now in case someone does find a method :)</p>
  
  <hr>
  
  <h2>Other solutions</h2>
  
  <hr>
  
  <p>These questions talk about this issue but don't provide a solution for this setup the way I'd expect it to work:</p>
  
  <ul>
  <li><ol>
  <li>This won't help because the header issn't placed over the container but above. <a href="https://stackoverflow.com/questions/14017728/html-javascript-passing-the-scroll-action-from-one-element-to-another">HTML &amp; JavaScript - Passing the scroll action from one element to another</a></li>
  </ol></li>
  <li><ol start="2">
  <li>The accepted answer doesn't transfer the event but just sets the scrollTop. This is not the behaviour the browser provides when scrolling. You can clearly see a difference in the jsFidle in the way the scroll happens when hovering the element or when the scroll is performed normally. The browser makes the scroll smooth, the scrollTop just sets the value making it 'shock'. However, except for the 'shock' part this is very close to the behaviour I'd like to have! <a href="https://stackoverflow.com/questions/7182502/pass-mousewheel-event-through-fixed-content">Pass mousewheel event through fixed content</a></li>
  </ol></li>
  </ul>