posted: 2019/11/03

React Hooksでモバイルデバイスのpinch zoomを抑止する

あまり推奨されるものではないのだが、どうしてもpinchによるzoomを抑制したいケースはまれにある。
しかし久々にこれをやろうとしたら<meta>タグのuser-scroll=noではダメになってたので覚え書き。
この辺を参考にしながら、hooksにすると下記のような具合になった。
const useDisablePinchZoomEffect = () => {
  useEffect(() => {
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    document.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      document.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
}
documentでなく一部の要素を抑止したいならこんな感じだろう。
const SuspendPinchZoom = ({ children }) => {
  const ref = useRef<HTMLDivElement>(null)
  useLayoutEffect(() => {
    const target = ref.current
    if (!target) return
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    target.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      target.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
  return <div ref={ref}>{children}</div>
}
Edit on Github
|