title: React JS: onWheel bubbling stopPropagation not working
body: <blockquote>
    <p>TL;DR:</p>
  </blockquote>
  
  <p>See my jsfiddle link where scrolling child div up till bottom/top should not start scrolling parent. I tried using e.stopPropagation()
  which didn't work. So need solution (without using mixins).</p>
  
  <blockquote>
    <p>My Code:</p>
  </blockquote>
  
  <p><a href="http://jsfiddle.net/vmvrphjn/" rel="nofollow">http://jsfiddle.net/vmvrphjn/</a></p>
  
  <pre><code>//////////HTML CODE
  &lt;script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
      &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;
  
  ////////CSS CODE    
  .childScroll{
    max-height: 200px;
    overflow-y: scroll;
    background-color: white;
    max-width: 200px;
    margin: 0 auto;
    border: 1px solid blue
  }
  
  .parentScroll {
    text-align: center;
    max-height: 300px;
    overflow-y: scroll;
    background-color: lightgreen;
    padding: 10px;
  }
  
  ////////JS CODE 
  class Hello extends React.Component {
    render() {
  
      return (
      &lt;div className='parentScroll'&gt;
            Scrollable Parent: &lt;br /&gt;&lt;br /&gt;
          &lt;div className='childScroll' onWheel = {(e)=&gt;{console.log('Scrolling Me..'); e.stopPropagation();}}&gt;
        Scroll CHILD LIST:1 &lt;br /&gt;&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          Some text blah&lt;br /&gt;
          &lt;/div&gt;
      &lt;div className='childScroll' onWheel = {(e)=&gt;{console.log('Parent got scroll event');}}&gt;
        Scroll CHILD LIST:2 &lt;br /&gt;&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
          Hi text blah&lt;br /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
    }
  }
  
  ReactDOM.render(
    &lt;Hello name="World" /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <blockquote>
    <p>My Target:</p>
  </blockquote>
  
  <p>I am having a div which scrolls. But on coming to the top or the bottom after the scrolling the div, the scrolling starts happening on the entire page itself which I don't want. I think it's happening due to event propagation, so I am trying to stop in following manner.</p>
  
  <blockquote>
    <p>My Implementation:</p>
  </blockquote>
  
  <p>I am using "extends Component (es6 way)" to create my components. And I've put onWheel event listener as</p>
  
  <p>It's consoling out 'Scrolling Me' fine but I am not able to stop propagating this event to the parent.
  Not sure why stopPropagation is not happening exactly or whether this issue is happening because of propagation</p>
  
  <p>I don't want to use libraries which used mixins, so please don't suggest me this way.</p>