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

Question

我有一个使用 Material UI 的 React 应用程序。该应用程序在很多地方都实现了 slider 组件(https://material.io/components/sliders)。使用触摸屏设备时，我在尝试向上或向下滚动页面时无意中影响了 slider 组件(值正在更改)。其他页面组件不会发生这种情况，我怀疑这是因为 slider 确实(并且应该)响应滑动事件。
Material UI 的文档暗示了一种区分“滚动”和“滑动”的方法(https://material.io/design/interaction/gestures.html#types-of-gestures)。有没有办法让我向我的 slider 组件指示应该忽略“滚动”。或者，我可以区分垂直或水平滑动，告诉 slider 忽略垂直滑动吗？

Answer 1

我想出了一个相当优雅的解决方案，我相信它允许用户滚动，如果他们的滚动位置开始在轨道上而不是在拇指上。这复制了 native HTML 范围输入，所以我觉得这是最好的解决方案。
这有两个部分
第一步，允许touch-action在 slider 根元素上，因为它默认被禁用并阻止用户在 slider 上开始滚动

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

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

第 2 步，使用 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 的完整演示。