移动端React页面Ant Design Charts阻止页面滚动问题求助

问题描述 #

React应用页面包含6-7个Ant Design图表及其他内容，在Android移动端触摸图表区域尝试滚动时，页面滚动被阻止，仅触发图表tooltip，无法正常滚动页面。使用@ant-design/plots版本为^2.1.13，升级或降级版本后问题仍存在。示例代码如下：

import { DualAxes } from '@ant-design/plots';

export const EarningsPerShare = () => {
  const formattedData = [
    {
      value: 3.64,
      year: 2023,
      type: 'EPS',
    },
    {
      value: 1.85,
      year: 2022,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 2.14,
      year: 2021,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 3.19,
      year: 2020,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4,
      year: 2019,
      type: 'EPS',
    },
    {
      value: 4.01,
      year: 2018,
      type: 'EPS',
    },
    {
      value: 3.22,
      year: 2017,
      type: 'EPS',
    },
  ];

  const config = {
    xField: 'year',
    legend: false,
    tooltip: {
      items: [
        {
          channel: 'y',
          name: 'EPS',
          valueFormatter: (d: any) => {
            return `${d}`;
          },
        },
      ],
    },
    scrollbar: {
      x: {
        style: {
          trackSize: 20,
          isRound: true,
        },
      },
      y: false,
    },
    children: [
      {
        data: formattedData,
        type: 'interval',
        yField: 'value',
        stack: true,
        colorField: 'type',
        style: { maxWidth: 20, minWidth: 20 },
        interaction: { elementHighlightByColor: { background: true } },
        scale: {
          color: {
            relations: [['EPS', '#5b9bd5']],
          },
        },
      },
    ],
  };

  if (!formattedData || formattedData?.length <= 0) {
    return <span></span>;
  }

  return (
    <div className="flex flex-col w-full px-3 mt-2">
      <div className="h-[300px]">
        <DualAxes {...config} />
      </div>
    </div>
  );
};

解决方案 #

方案1：调整图表交互配置，避免阻止滚动 #

修改图表的interaction配置，禁用会干扰滚动的触摸交互，或调整tooltip触发方式：

// 在children的interaction中修改
interaction: {
  elementHighlightByColor: false, // 禁用元素高亮的触摸交互
  tooltip: {
    trigger: 'click', // 将tooltip触发改为点击，避免触摸滚动时误触发
  },
}

方案2：通过触摸事件处理允许垂直滚动 #

给图表外层容器添加触摸事件监听，判断滚动方向，仅允许垂直滚动传递到页面：

return (
  <div className="flex flex-col w-full px-3 mt-2">
    <div 
      className="h-[300px]"
      onTouchMove={(e) => {
        const touch = e.touches[0];
        const prevY = Number(e.currentTarget.dataset.lastY || touch.clientY);
        const prevX = Number(e.currentTarget.dataset.lastX || touch.clientX);
        const deltaY = Math.abs(touch.clientY - prevY);
        const deltaX = Math.abs(touch.clientX - prevX);

        // 当垂直滚动幅度大于水平时，允许页面滚动，不阻止默认行为
        if (deltaY <= deltaX) {
          e.preventDefault();
        }

        e.currentTarget.dataset.lastY = touch.clientY;
        e.currentTarget.dataset.lastX = touch.clientX;
      }}
    >
      <DualAxes {...config} />
    </div>
  </div>
);

方案3：使用CSS属性优化触摸行为 #

给图表容器添加touch-action属性，指定仅允许垂直触摸滚动：

.chart-container {
  touch-action: pan-y;
}

然后给外层div添加该类：

<div className="h-[300px] chart-container">
  <DualAxes {...config} />
</div>

方案4：自定义tooltip显示逻辑 #

如果需要保留tooltip的触摸触发，可通过shouldShow方法判断是否为滚动行为，避免误触发：

tooltip: {
  items: [
    {
      channel: 'y',
      name: 'EPS',
      valueFormatter: (d: any) => `${d}`,
    },
  ],
  shouldShow: (event) => {
    if (event.type === 'touchstart') {
      const touch = event.touches?.[0];
      if (!touch) return true;
      // 记录上次触摸位置，判断是否为滚动行为
      const prevY = window.lastTouchY || touch.clientY;
      const delta = Math.abs(touch.clientY - prevY);
      window.lastTouchY = touch.clientY;
      // 仅当触摸位移极小时才显示tooltip
      return delta < 5;
    }
    return true;
  },
}

内容的提问来源于stack exchange，提问作者Rubel Biswas