在 useGesture 上拖放行为

问题描述

我正在使用 react-use-gesture 沿 x 轴拖动一个 div。它没有做任何花哨的事情，只是存储移动 x 值并使用它来抵消 div 的 left css 属性。代码使用 useState 钩子存储累积 x 偏移，状态设置触发重新渲染。

此处示例：https://3upld.csb.app/ (https://codesandbox.io/embed/react-usegesture-test-forked-3upld?file=/src/index.js&codemirror=1)

下面的代码

export default function Home() {
  const [offset,setoffset] = useState(0);

  const bind = useGesture(
    {
      onDrag: ({ movement: [mx] }) => {
        console.log("x",mx);
        setoffset(mx);
      }
    },{
      drag: {
        initial: () => [offset,0]
      }
    }
  );
  return (
    <>
      <h1 className="font-bold text-3xl">React useGesture test</h1>
      <div className="relative">
        <div
          {...bind()}
          className="absolute bg-red-600 h-48 w-48"
          style={{ left: `${100 + offset}px` }}
        >
          Box
        </div>
      </div>
    </>
  );
}

当我查看此浏览器时，它运行良好 - 我可以四处拖动。 当我将浏览器切换到仿真时，它不会拖动超过几个像素。请参阅下面的示例 gif。

我也在 Android 手机上的 Chrome（显示出问题）和 iPad Pro 上的 Safari 上对此进行了测试（如果我缓慢拖动，不会显示该问题）。

有谁知道为什么这在移动设备上运行不顺畅？谢谢

解决方法

尝试在 css 中设置 touch-action: none;。
https://use-gesture.netlify.app/docs/extras/