🤏

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

2020/09/22に公開

JavaScript

React

React Hooks

tech

記事作成日: 2019/11/03

あまり推奨されるものではないのだが、どうしても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>
}

Discussion