Chartjs 缩放插件 - 默认滚动行为不起作用

问：

在我的项目中，我使用 Chart.js 实现了一个条形图。该图表允许用户滚动查看过去两年中前几个月的金额。为了在 x 轴上启用平移并实现此功能，我合并了 Chart.js 缩放插件。但是，我遇到了一个问题，即 y 轴上的默认滚动无法按预期运行。问题源于画布的缩放插件添加了 CSS 属性 '，' 。此属性可防止默认滚动行为。touch-action: none

为了解决这个问题，我尝试将 '' 属性更改为 '，' ，从而启用默认滚动行为。但是，此调整会破坏条形图 x 轴上的平移功能。touch-actionauto

我在我的项目中面临一个挑战，我需要区分使用 Chart.js 实现的条形图中 x 轴和 y 轴上的用户滚动。具体来说，当用户沿 x 轴滚动时，我想利用 Chart.js 缩放插件提供的平移功能显示前几个月的数据。另一方面，当用户沿 y 轴滚动时，我打算使默认滚动行为生效，允许他们浏览其他内容。

我目前正在寻求有关如何实现解决方案的指导，该解决方案可以准确检测用户是沿 x 轴还是 y 轴滚动，并随后触发适当的操作，例如显示前几个月或启用默认的 y 轴滚动行为。关于如何实现这一细微功能的任何见解或建议将不胜感激。

对于条形图的画布，如果应用了缩放插件并启用了平移。 自动添加，防止默认滚动行为touch-action : none

display: block;
box-sizing: border-box;
height: 300px;
width: 343px;
touch-action: none;
user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

在 ts 文件 chartjs 选项中

plugins: {
zoom: {
          pan: {
            sensitivity: 6,
            enabled: true,
            mode: 'x',
            speed: 0.2,
            threshold: 8,
          },
        },
}