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](https://jsfiddle.net/wrnanpmL/1/) 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.

```js
$(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>');
});
```

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

```html
<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>
```