Highcharts结合PerfectScrollbar在Firefox中鼠标滚轮缩放功能异常

我之前也碰到过类似的跨浏览器滚轮事件冲突问题，结合你的场景，这里整理出可行的解决方案：

问题场景回顾 #

你的实现包括：

• 使用Highcharts及插件实现图表的鼠标滚轮缩放功能
• 父容器借助PerfectScrollbar实现滚动效果
• 预期逻辑：鼠标悬停图表时滚轮触发缩放，离开图表时滚轮控制父容器滚动
• 异常情况：Chrome下功能正常，但Firefox中鼠标悬停图表时滚轮缩放完全失效，问题根源在于两个库对滚轮事件的处理存在浏览器兼容性冲突

问题原因分析 #

Firefox对wheel事件的冒泡逻辑和默认行为处理和Chrome有差异，加上PerfectScrollbar会监听父容器的滚轮事件，导致当鼠标悬停在图表上时，滚轮事件被父容器的PerfectScrollbar提前拦截，Highcharts无法获取到事件来执行缩放逻辑。

可行解决方案 #

核心思路是：当图表区域触发滚轮事件时，阻止事件冒泡到父容器，确保Highcharts优先处理缩放逻辑。具体实现如下：

步骤1：修改Highcharts的事件处理逻辑 #

在图表加载完成后，给图表容器绑定自定义的滚轮事件监听器，手动处理缩放并阻止事件冒泡：

Highcharts.chart('chart-container', {
    chart: {
        zoomType: 'x',
        events: {
            load: function() {
                const chartInstance = this;
                // 给图表容器添加滚轮事件监听
                chartInstance.container.addEventListener('wheel', function(e) {
                    // 阻止事件冒泡到父容器，避免PerfectScrollbar拦截
                    e.stopPropagation();
                    
                    // 根据滚轮方向计算缩放比例（可根据需求调整）
                    const zoomRatio = e.deltaY > 0 ? 0.9 : 1.1;
                    // 调用Highcharts内置的zoom方法执行缩放
                    chartInstance.zoom(zoomRatio);
                }, { passive: false }); // 必须设置为false，Firefox才允许阻止事件传播
            }
        }
    },
    // 你的其他图表配置（数据系列、坐标轴等）
});

步骤2：正常初始化PerfectScrollbar #

保持父容器的PerfectScrollbar初始化代码不变：

new PerfectScrollbar('parent-container');

关键细节说明 #

1. e.stopPropagation()：这行代码会阻止滚轮事件向上冒泡到父容器，确保PerfectScrollbar不会在图表区域触发滚动逻辑。
2. passive: false：Firefox默认会将滚轮事件监听器设为passive模式，这种模式下无法调用stopPropagation()或preventDefault()，所以必须显式关闭被动模式才能生效。
3. 手动调用zoom()：直接使用Highcharts的内置缩放方法，替代插件的默认事件处理，能有效避免跨浏览器的兼容性差异。

效果验证 #

修改完成后，Firefox下的表现会和Chrome一致：鼠标悬停图表时滚轮控制缩放，离开图表区域时滚轮控制父容器滚动。

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