Javascript 当鼠标位于一个特定div上时防止页面滚动

我的问题与此类似，但我想知道是否有一种使用css和/或react的方法不需要jQuery

我想禁用鼠标滚轮事件上的页面滚动，当光标位于一个特定的div上时。 div是一个在鼠标滚轮事件上缩放的图形，由React组件渲染

我已经试过e.C.了，但chrome告诉我

由于目标被视为被动事件，无法在被动事件侦听器中防止默认值

有人能帮忙吗？提前谢谢

编辑：为任何人找到了一个简单的解决方案

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

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

---

谢谢！我正在寻找一个管理它的最新答案

我的ReactJS解决方案是在检测到OnMouseCenter/Leave时添加和删除事件。另外，使用被动语态，取自这个答案

主成分：

启用滚动：

禁用滚动：

预防默认：

---

也许这有帮助？+一个mouseEnter/mouseLeave事件必须处理这个特殊情况谢谢，我最终得到了一个类似的和非常简单的结果。changeScroll{let style=document.body.style.overflow document.body.style.overflow=style==“hidden”？“auto”：“hidden”}我尝试了几种解决方案。这是最有效的方法！也可以在你的代码中实现，并且快乐=

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

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

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

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

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