I'm inserting a Mapbox map with mapbox-gl-js as a full-width, full-height div into my website. The default behaviour is that scroll is used for zooming. But I don't want that as then the user can't scroll down the page anymore.

MAP.scrollZoom.disable(); solves that, however than I lose the option to zoom in/out by pinching on trackpad.

Is there a way to disable zoom by scroll, but keep zoom by pinch?

I found which seems to be exactly what I am looking for, but I don't get it to work.

This is my current code:

<script src=".3.0/mapbox-gl.js"></script>
<link href=".3.0/mapbox-gl.css" rel="stylesheet"/>

mapboxgl.accessToken = 'xxx';
const MAP = new mapboxgl.Map({
    container: MAP_DIV,
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    bounds: <?php echo $mapBounds; ?>,
});
MAP.addControl(new mapboxgl.NavigationControl({showCompass: false}));
MAP.scrollZoom.disable();```