My question is similiar to this How to prevent page scrolling when scrolling a DIV element? but I'm wondering if there is an approach with css and/or react that does not require jQuery.

I want to disable page scrolling on a mouseWheel event when the cursor is over one particular div. The div is a graph which zooms on a mouseWheel event, and is rendered by a React ponent.

I've tried e.preventDefault however chrome tells me

Unable to preventDefault inside passive event listener due to target being treated as passive

Can anyone help? Thanks in advance.

EDIT: Found a simple solution for anyone looking.

changeScroll(){ 
    let style = document.body.style.overflow 
    document.body.style.overflow = (style === 'hidden') ? 'auto':'hidden'
} 

<div 
    onMouseEnter={this.changeScroll} 
    onMouseLeave={this.changeScroll} /> 
    <ReactComponent/> 
</div>

My question is similiar to this How to prevent page scrolling when scrolling a DIV element? but I'm wondering if there is an approach with css and/or react that does not require jQuery.

I want to disable page scrolling on a mouseWheel event when the cursor is over one particular div. The div is a graph which zooms on a mouseWheel event, and is rendered by a React ponent.

I've tried e.preventDefault however chrome tells me

Unable to preventDefault inside passive event listener due to target being treated as passive

Can anyone help? Thanks in advance.

EDIT: Found a simple solution for anyone looking.

changeScroll(){ 
    let style = document.body.style.overflow 
    document.body.style.overflow = (style === 'hidden') ? 'auto':'hidden'
} 

<div 
    onMouseEnter={this.changeScroll} 
    onMouseLeave={this.changeScroll} /> 
    <ReactComponent/> 
</div>

• javascript
• html
• css
• reactjs

• Maybe this helps ? stackoverflow./questions/4770025/… + a mouseEnter / mouseLeave event to the <WhateverComponent /> that has to handle this special case – Luciano Semerini Commented Apr 4, 2019 at 6:04
• 1 Thanks, I ended up with something similiar and pretty simple. changeScroll(){ let style = document.body.style.overflow document.body.style.overflow = (style === 'hidden') ? 'auto':'hidden' } <div onMouseEnter={this.changeScroll} onMouseLeave={this.changeScroll} /> <ReactComponent/> </div> – BarefootDev Commented Apr 4, 2019 at 6:33

1 Answer 1

Thanks! I was looking for a current answer for managing it.

My ReactJS solution was to add and remove the event when onMouseEnter/Leave is detected. Additionally, with the use of passive, taken from this answer link.

Principal ponent:

<Wrapper
    onWheel={this.handleScroll}
    onMouseEnter={this.disableScroll}
    onMouseLeave={this.enableScroll}
> ...</Wrapper>

handleScroll():

public handleScroll = (event) => {
    if (event.deltaY > 0) {
      this.decreaseValue()
    } else {
      this.increaseValue()
    }
}

enableScroll():

public enableScroll = () => {
    document.removeEventListener('wheel', this.preventDefault, false)
}

disableScroll():

public disableScroll = () => {
    document.addEventListener('wheel', this.preventDefault, {
      passive: false,
    })
}

preventdefault():

public preventDefault(e: any) {
    e = e || window.event
    if (e.preventDefault) {
      e.preventDefault()
    }
    e.returnValue = false
  }