Annuler l'événement roue avec e.preventDefault dans l'événement react bubbling

Question

J'essaie d'empêcher le défilement de la fenêtre avec e.preventDefault() lorsqu'un événement de roue est déclenché mais que le navigateur défile quoi qu'il arrive.

<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
}

Answer 1

Je n'ai pas trouvé de moyen d'empêcher le défilement dans les événements React, mais il est possible d'obtenir le même effet en utilisant les refs.

Dans le constructeur :

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

En rendu :

<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>

Ajout et suppression de l'écouteur d'événements preventDefault :

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

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

Answer 2

React lie tous les événements à l'élément Root (et non à l'élément document ), et le wheel est lié en interne à l'aide de true option et je cite MDN :

Un booléen qui, s'il est vrai, indique que la fonction spécifiée par listener n'appellera jamais preventDefault(). Si un auditeur passif appelle preventDefault(), l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console.

Voici comment j'ai bloqué le défilement de la page lorsque j'utilise la molette pour affecter un champ de saisie :

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)
}, [])

---

Discussions de référence :

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

Answer 3

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

essayez ceci