Highcharts 阻止移动 Safari 上的页面在我水平滚动数据点时上下移动

问题描述

我在 React 中使用 Highcharts 系列折线图。配置如下。除了在像 Safari 这样的移动浏览器上，当我在折线图上（水平）移动手指以“悬停”在系列中的每个数据点上时，一切都正常，它也会稍微垂直移动页面。我认为每次水平移动手指时，都会有一些垂直移动（用手指不可能在完美的水平线上移动）。

问题是：当我在 Highcharts 上水平平移时，是否可以“锁定”页面上下滚动？

常量

createLineChartOptions = (series,categories,height) => ({
    series,xAxis: {
        categories,title: { text: null },labels: {
            step: 2,},crosshair: {
            width: 1,color: GRID_LINE_COLOR
        }
    },yAxis: {
        title: { text: null },tickAmount: 3,gridLineColor: GRID_LINE_COLOR,gridlinewidth: 0.5,labels: {
            formatter: function () {
                return parseFloat(this.value).abbreviatedDollars()
            }
        }
    },chart: {
        type: 'line',height
    },tooltip: {
        shared: true,useHTML: true,borderColor: 'transparent',formatter: function () {
            const series = this.points
                .map(({ x,y,color,series }) => `<tr><td><b><span style="color:${color}">&bull; ${series.name}</b></td><td>${Math.abs(y).todollars()}</td></tr>`)
                .join('');

            return `${this.x}<table>${series}</table>`;
        },positioner: function (labelWidth,labelHeight,point) {
            const chart = this.chart,plottop = chart.plottop;

            return { x: chart.plotLeft + 10,y: plottop };
        },shape: 'rect',plotOptions: {
        series: {
            cursor: 'crosshair',marker: {
                enabled: false,symbol: 'circle',lineColor: GRID_LINE_COLOR,states: {
                    hover: {
                        radius: 2,radiusPlus: 0
                    }
                }
            }
        },legend: { enabled: false },});

编辑：尝试在 iPhone 模拟器或手机上打开它，并尝试通过每个点：https://react-1afped.stackblitz.io

视频：https://ibb.co/37rhgv0

解决方法

您可以将以下代码与将光标悬停在图表上结合使用。

if (elem.addEventListener) {
     // IE9+,Opera,Chrome/Safari
     elem.addEventListener ("mousewheel",onMouseWheel,false);
     // Firefox
     elem.addEventListener ("DOMMouseScroll",false);
} else { // IE<9
     elem.attachEvent ("onmousewheel",onMouseWheel);
}
        
function onMouseWheel(e) {
    e = e || event;
    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}