Question

我的问题类似于此How to prevent page scrolling when scrolling a DIV element?，但我想知道是否存在不需要jQuery的CSS和/或React方法。

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

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

由于目标被视为被动，因此无法阻止被动事件侦听器中的Default

有人可以帮忙吗？预先感谢。

编辑：找到了一个简单的解决方案。

df %>% 
  tidyr::unnest() %>% 
  dplyr::rowwise %>% 
  dplyr::mutate(numeric_y = eval(parse(text = y))) 

# A tibble: 6 x 3
      x y     numeric_y
  <dbl> <chr>     <dbl>
1     1 111         111
2     1 222         222
3     2 333         333
4     3 555         555
5     3 666         666
6     3 777         777

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
  }

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

1 个答案: