Chrome 51默认设定注入scroll
事件的passive
变量为true
。而React的设计原则是跟随chrome的设定。因此在React设计的合成事件(SyntheticEvent), 无法实现 e.preventDefault()
目前的解决方案是,自行绑定dom元素,添加addEventListener
import React, { useRef, useEffect } from 'react'const BlockPageScroll = ({ children }) => {const scrollRef = useRef(null)useEffect(() => {const scrollEl = scrollRef.currentscrollEl && scrollEl.addEventListener('wheel', stopScroll)return () => {scrollEl && scrollEl.removeEventListener('wheel', stopScroll)}}, [])const stopScroll = e => e.preventDefault()return (<div ref={scrollRef}>{children}</div>)}const Main = () => (<BlockPageScroll><div>Scrolling here will only be targeted to inner elements</div></BlockPageScroll>)