Mouse wheel events in Reactjs Mouse wheel events in Reactjs reactjs reactjs

Mouse wheel events in Reactjs


First, your div is 0 height, so you don't scroll on it. You don't have to bind this as it is a class (and not an es6 react component). Just do a call to the function with the event as parameter on onWheel event:

https://jsfiddle.net/812jnppf/9/

render: function() {   return <div style={{height:300, width:300}} onWheel = {(e) => this.wheel(e)} >      < /div>;},

Of course, you have to clean code to style your div with a var or in css.

EDIT : I set it onWheel and not on onScroll (witch doesn't exist I guess ? confirm it if you know). I saw a SO post about adding scroll event to your component easilly : https://stackoverflow.com/a/29726000/4099279


Bind the callback to this:

render: function() {    return <div onWheel = {this.wheel.bind(this)} >       < /div>;}