如何触摸滚动？

Question

我有一个组件，其中应禁用touchmove事件。我尝试了以下内容，但它不起作用。

parentRef.current.addEventListener("touchMove", e => e.preventDefault(), false)

Answer 1

您可以简单地使用 touch-action> touch-action 您的CSS文件以从HTML主体或元素中删除滚动事件。在您的代码中添加以下代码。

touch-action: none;
-ms-touch-action: none;

Answer 2

您可以检查此设备是否在某些像素以下的内部宽度，然后设置溢出：隐藏和height＆amp;宽度到100VH＆amp; 100VW分别在使用effect的parentref

Answer 3

为了防止在React渲染的组件上使用CSS滚动，我们可以将Overflow CSS属性设置为使用JavaScript隐藏。

例如，我们写入：

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    document.body.style.overflow = "hidden";
  }, []);

  return <div>hello world</div>;
}

将车身元素的溢出CS设置为隐藏时，当组件安装时：

document.body.style.overflow = "hidden";

使用效率回调仅在组件安装时才运行，因为我们以空数组作为使用效果的第二个参数。