CODEWITHSUNDEEP
javascriptcssreactjs
Ettur
Ettur

Reputation: 789

Mouse Wheel / Scroll event in React element without overflow (picture zoom)

Is it possible to register onScroll event on a react element which does not have scrollbar / overflow ?

I wish to create zoom on a picture with mouse wheel scrolling. I tried

<div style={{position: "relative", width: "100%", height:"100%"}} onScroll={ () => console.log("TEST")}>

this wont fire event, neither will onWheel. If I change event to onClick everything works.

I know it's possbile, because there is a React components which make it work, I tried react wheel handler and it works. But how do they make it register mouse wheel events when there is no overflow or scrollbars?

EDIT:

I got it to work when I manually added eventlistener to componentDidMount, this is my current component. Is there a way I could make synthetic event onWheel work? I tried to add onWheel to div's and img but it wont fire.

class Zoom extends Component {
    state = {
      size: 20,      
    }

    componentDidMount() {
       window.addEventListener('wheel', this.handleScroll, true);
    }
    
    handleScroll = e => {
        e.preventDefault();  
        console.log(e)
        if (e.deltaY > 0 && this.state.size < 50) {
            this.setState({size: this.state.size + 1})
        } else if (e.deltaY < 0 && this.state.size > 20) {
            this.setState({size: this.state.size - 1})
        }       
      }
 
    render = () =>

    <div className="livetods-product-image-container" style={{
        top: openAsModal() ? '25%' : '20%',
        left: openAsModal() ? '30%' : '',
        right: openAsModal() ? '30%' : '',
        width: this.state.size + "%"        
    }}>

    <div className="livetods-product-image-button-container" >
                <div></div>             
                <h6 className="livetods-product-image-name">{this.props.name}</h6>
                <span className="livetods-modal-header-close-button" onClick={e => this.props.hideImage()}>&times;</span>   

    </div>

    <div style={{position: "relative", width: "100%", height:"100%"}}>

        <div style={{position: "absolute", padding: "5px"}}>
            <FontAwesomeIcon icon={faSearchPlus} color={'red'} style={{ width: '20px', height: '20px', pointerEvents:"none"}}/>
        </div>
        
            <img src={this.props.src} style={{borderRadius: "5px"}}/>      
       
    </div>

</div>
    
}

Upvotes: 3

Views: 11001

Answers (1)

Karan
Karan

Reputation: 817

Use the onWheel event and its properties instead of onScroll to achieve the same result.

onScroll event no longer bubbles up in react. This question is pretty similar.

onWheel works for both trackpad scrolling as well as mouse wheel scrolling.

Here is a simple example that shows onWheel working with your provided code sample.

UPDATE:

I have changed the codesanbox example to reflect your class component. onWheel works in it too now. The issue you could be facing earlier was a warning like this one:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `isPropagationStopped` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/docs/legacy-event-pooling.html for more information.

The workaround to which is adding e.persist() to your onScroll function, as shown in my example.

Upvotes: 2

Related Questions