javascript - 滚动事件无意中更改了 Material UI 滑块值

Question

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

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

标签： javascriptreactjsmaterial-ui

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 的完整演示。