HighCharts柱状图上鼠标滚轮无法滚动页面问题求助

核心原因 #

Highcharts默认会拦截图表区域的鼠标滚轮事件，用来实现图表坐标轴的缩放功能，导致页面滚动被阻断。

有效解决方法 #

方法1：单图表配置，禁用滚轮缩放并透传事件 #

给目标图表添加鼠标滚轮事件处理，阻止图表的默认缩放行为，手动触发页面滚动：

import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const chartOptions = {
  chart: {
    type: 'column',
    events: {
      mouseWheel: function(e) {
        // 阻止图表自己处理滚轮事件
        e.preventDefault();
        // 手动触发页面滚动，deltaY是滚轮滚动的距离
        window.scrollBy(0, e.originalEvent.deltaY);
      }
    }
  },
  // 关闭x、y轴的缩放功能，彻底禁用图表的滚轮交互
  xAxis: {
    zoomEnabled: false,
    scrollbar: { enabled: false }
  },
  yAxis: {
    zoomEnabled: false
  },
  // 其他图表配置（数据、样式等）...
};

export default function ColumnChart() {
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

方法2：全局配置，适配多图表场景 #

如果页面有多个Highcharts图表，可以全局设置，避免每个图表重复写配置：

// 在项目入口文件（比如index.js）添加全局配置
import Highcharts from 'highcharts';

Highcharts.setOptions({
  chart: {
    events: {
      mouseWheel: function(e) {
        e.preventDefault();
        window.scrollBy(0, e.originalEvent.deltaY);
      }
    }
  },
  xAxis: { zoomEnabled: false, scrollbar: { enabled: false } },
  yAxis: { zoomEnabled: false }
});

为什么之前的配置无效？ #

• scrollablePlotArea是让图表自身的绘图区域支持滚动（比如图表内容超出容器时），和页面滚动无关，所以不解决问题。
• followTouchMove是针对触摸设备的触摸滑动配置，只影响触摸事件，对鼠标滚轮完全不起作用。

内容的提问来源于stack exchange，提问作者Jón Gunnar