Scroll event isn't propagated to parent

Question

I am having a grid-div with overflow-y: scroll; and this grid-div is some time 10000pixels long. On mouserhover of a specific items of a grid-div I am firing mouserhover event, and user shows tooltip over the element. Now user add this popup under the body element. and user has written scroll event on window that if scroll event is fired, hide the tooltip. but when user is still over my grid-div, scroll event is fired only on grid-div, and event is not propagate to any parent elements(html,body,window) so user can't hide that element.

So here why scroll event is not propagated like click events? what is the possible solution to propagate the event?

Here is an example fiddle of what issue I am facing, Here I haven't added tooltip but only sample code to reproduce that scrolling issue. Here I am expecting that for every "Scrolled On div" there should be "Scrolled On Window" written in log.

$(window).on("scroll", function() {
  // While scrolling on div why this event is not fired?
  $('#eventData').append('<div>Scrolled On Window</div>');
});

$('#grid-div').on("scroll", function() {
  $('#eventData').append('<div>Scrolled On div</div>');
});

#grid-div {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="grid-div">
  <br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A
</div>
<div id="eventData">
</div>

Answer 1

Scroll events do not bubble up when it is an element that is triggering the event

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Bubbles: Not on elements, but bubbles to the default view when fired on the document

If you want to also have the window scroll event to execute you will need to trigger it yourself

$(window).trigger("scroll");

$(window).on("scroll", function(e,e2) {
  // While scrolling on div why this event is not fired?
  //get original event if triggered programmatically
  e = e2 || e;
  $('#eventData').append('<div>Scrolled On Window</div>');
});

$('#grid-div').on("scroll", function(e) {
  $('#eventData').append('<div>Scrolled On div</div>');
  //all parameters after the first will be passed to the event callback
  //so here passing it the original event.
  $(window).trigger("scroll",e);
});

#grid-div {
  height: 100px;
  overflow-y: scroll;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="grid-div">
  <br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A<br/>A
</div>
<div id="eventData">
</div>