滚动事件无意中更改材质 UI 滑块值

Question

我有一个使用 Material UI 的 React 应用程序。该应用程序在很多地方都实现了滑块组件（https://material.io/components/sliders）。使用触摸屏设备时，我在尝试向上或向下滚动页面时无意中影响了滑块组件（值正在更改）。其他页面组件不会发生这种情况，我怀疑这是因为滑块确实（并且应该）响应滑动事件。

Material UI 的文档暗示了一种辨别“滚动”和“滑动”的方法（https://material.io/design/interaction/gestures.html#types-of-gestures）。有没有办法让我向我的滑块组件指示“滚动”应该被忽略。或者，我可以区分垂直还是水平滑动，告诉滑块忽略垂直滑动吗？

Answer 1

我相信，我已经提出了一个相当优雅的解决方案，如果用户的滚动位置从轨道开始但不是从拇指开始，则允许用户滚动。这复制了原生 HTML 范围输入，所以我觉得这是最好的解决方案。

这有两个部分

第 1 步，允许touch-action滑块根元素，因为默认情况下它是禁用的，并阻止用户在滑块上开始滚动

const useStyles = makeStyles({
  sliderRoot: {
    touchAction: "auto"
  }
});

return (
  <Slider
    classes={{
      root: classes.sliderRoot
    }}
    ...
  />

第 2 步，使用 a 停止根元素上的传播ref

const ref = useRef(null);

useEffect(() => {
  if (ref.current) {
    ref.current.addEventListener(
      "touchstart",
      (e) => {
        const isThumb = e.target?.dataset.index;

        if (!isThumb) {
          e.stopPropagation();
        }
      },
      { capture: true }
    );
  }
});

return (
  <Slider
    ref={ref}
    ...
  />

这是 Codesandbox 上完整运行的演示。