JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
  <div id="b">
  
    <div id="c">
      Click Me!asd<br>
        asdsa<br>
        <br>
       
    </div>        
  </div>
     <br>
        <br>
        <br>
        <br>
        <br>
</div>

<div id="console">Hi.</div>

CSS

div { font: 12px Arial; margin: 10px; padding: 10px; }

#a { border: 1px solid #f00; height:100px; overflow:auto}
#b { border: 1px solid #0f0; }
#c { border: 1px solid #00f; }

#console { border: 1px solid #ccc; }

JavaScript

$('#c').on('mousewheel', function(e){
    $('#console').append('<br />C scrolled!');
});

$('#b').on('mousewheel', function(e){
    e.stopPropagation();
    $('#console').append('<br />B scrolled!');
});

$('#a').on('mousewheel', function(e){
    $('#console').append('<br />A scrolled!');
});