Highcharts prevent page on mobile Safari from moving up and down as I scroll horizontally through data points

Question

I'm using Highcharts series line charts in React. The config is below. Everything is working fine except on mobile browser like Safari, when I move my finger across the line chart (horizontally) to 'hover' over each data point in a series, it also moves the page vertically ever so slightly. I presume each time I pan my finger horizontally, there's also some vertical movement (it's impossible to move in a perfectly horizontal line with your finger).

Question is: is it possible to "lock" the page from scrolling up and down while I pan horizontally on Highcharts?

const

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()
            }
        }
    },
    title: { text: null },
    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 },
});

Edit: try opening this on an iPhone Simulator or on your phone and try going through each point: https://react-1afped.stackblitz.io

Video: https://ibb.co/37rhgv0

Answer 1

You can use the code below in conjunction with hovering the cursor over your chart.

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