Cancel wheel event with e.preventDefault in react event bubbling

Question

I am trying to prevent window scrolling with e.preventDefault() when a wheel event is fired but browser scrolls no matter what.

<div onWheel={this.handleWheelEvent} >
  <div className='yellow fullpage'>Yellow Page</div>
  <div className='green fullpage'>Green Page</div>
  <div className='blue fullpage'>Yellow Page</div>
</div>

js

handleWheelEvent = e => {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    // those 3 should prevent browser from scrolling but they don't
}

Sorry, didn't realize it was ReactJS not JS. This link should help. https://stackoverflow.com/questions/34790949/react-js-onwheel-bubbling-stoppropagation-not-working — dar, Aug 05 '19 at 13:06

score 9 · Answer 1 · answered Aug 25 '20 at 12:58

I couldn't find a way to prevent scrolling in React events but it's possible to achieve same effect using refs

In constructor:

this.divRef = React.createRef()
this.preventDefault = e => e.preventDefault()

In render:

<div ref={this.divRef} >
  <div className='yellow fullpage'>Yellow Page</div>
  <div className='green fullpage'>Green Page</div>
  <div className='blue fullpage'>Yellow Page</div>
</div>

Adding and removing preventDefault event listener:

componentDidMount () {
    this.divRef.current.addEventListener('wheel', this.preventDefault)
}

componentWillUnmount () {
    this.divRef.current.removeEventListener('wheel', this.preventDefault)
}

this is the only method that worked for me after testing many other solutions, mostly that utilize blur(). thanks! — Michael Brown, Mar 26 '22 at 01:10

score 5 · Answer 2 · answered Jan 19 '21 at 16:42

React binds all events at the root element (not the document), and the wheel event is binded internally using true option, and I quote MDN:

A Boolean that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning

This is how I did blocked the page from scrolling while using the wheel to affect an input field:

const wheelTimeout = useRef()

const onWheel = e => {
    // ... some code I needed ...

    // while wheel is moving, do not release the lock
    clearTimeout(wheelTimeout.current)

    // flag indicating to lock page scrolling (setTimeout returns a number)
    wheelTimeout.current = setTimeout(() => {
      wheelTimeout.current = false
    }, 300)
}

// block the body from scrolling (or any other element)
useEffect(() => {
    const cancelWheel = e => wheelTimeout.current && e.preventDefault()
    document.body.addEventListener('wheel', cancelWheel, {passive:false})
    return () => document.body.removeEventListener('wheel', cancelWheel)
}, [])

Reference discussions:

https://github.com/facebook/react/issues/14856

Excellent answer and reference. – moeabdol Apr 28 '23 at 04:43 — moeabdol, Apr 28 '23 at 04:43

score -1 · Answer 3 · edited Oct 31 '21 at 20:16

-1

You can't use ‍event.preventDefault() inside event onScroll, because preventDefault apply after page scrolled. But you can use prevetDefault on the following events:

onWheel
onKeydown
onPageUp
onPageDown

edited Oct 31 '21 at 20:16

mrghofrani

1,335
2
13
32

answered Oct 31 '21 at 13:36

Александр Параконный

1

score -3 · Answer 4 · answered Oct 19 '20 at 08:27

-3

<div onWheel={e => e.stopPropagation()}></div>

try this

answered Oct 19 '20 at 08:27

RomanistHere

795
7
17

Cancel wheel event with e.preventDefault in react event bubbling

4 Answers4