wu-fa-preventdefault.md

无法preventDefault

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.current
    scrollEl && 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>
)