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();```