onWheel Stop bubbling is not happening.

My Target: 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.

My Implementation: I am using “extends Component (es6 way)” to create my components. And I’ve put onWheel event listener as

return (
  <div className='scroll-box-list' onWheel = {(e)=>{console.log('Scrolling Me..'); e.stopPropagation();}}>
      <OtherThings />
  </div>
);

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

I don’t want to use libraries which used mixins, so please don’t suggest me this way.

[thomasjm]

I hit this issue too, and eventually found this blog post explaining the root cause: https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46

Using the nativeEvent didn’t work for me either, but it did work to use a ref on the element and manually do ref.current.addEventListener("wheel", (event) => event.stopPropagation())

[monkindey]

Hi , I used the event.preventDefault in React and it can work, The demo https://jsfiddle.net/monkindey/9kobyd2w/, I extract the logic code to be a npm package and it may be easy to use.

Hope it helps.