javascript - 当鼠标悬停在一个特定的 div 上时防止页面滚动

Question

我的问题与此类似 How to prevent page scrolling when scrolling a DIV element?但我想知道是否有一种不需要 jQuery 的 css 和/或 react 方法。

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

我试过 e.preventDefault 但是 chrome 告诉我

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

有人可以帮忙吗？提前致谢。

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

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

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

Answer 1

谢谢!我一直在寻找管理它的当前答案。

我的 ReactJS 解决方案是在检测到 onMouseEnter/Leave 时添加和删除事件。此外，使用 passive，取自此答案 link .

主成分:

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