useEffect(() => {
    const canvas = canvasRef.current

    if (canvas && scrollingEnabled) {
      const onMouse = () => {
        canvas.style.pointerEvents = 'auto'
      }

      const onScrollOrSwipe = () => {
        canvas.style.pointerEvents = 'none'
      }

      document.addEventListener('mousemove', onMouse, false)
      document.addEventListener('wheel', onScrollOrSwipe, false)
      document.addEventListener('touchmove', onScrollOrSwipe, { passive: true })

      return () => {
        document.removeEventListener('mousemove', onMouse)
        document.removeEventListener('wheel', onScrollOrSwipe)
        document.removeEventListener('touchmove', onScrollOrSwipe)
      }
    }
  }, [canvasRef])