Mapbox GL JS：如何禁用滚轮缩放但保留触控板捏合缩放功能

我在网站中嵌入了基于mapbox-gl-js实现的全屏Mapbox地图，默认通过鼠标滚轮缩放，但这会导致用户无法正常向下滚动页面。使用MAP.scrollZoom.disable()可以解决页面滚动冲突，但会同时失去触控板的捏合缩放功能。请问有没有办法仅禁用鼠标滚轮缩放，同时保留触控板的捏合缩放？

我尝试过相关方案但未生效，当前代码如下：

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet"/>

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

Mapbox GL JS从v2.0版本开始支持通过自定义scrollZoom的启用条件，实现仅禁用鼠标滚轮缩放、保留触控板捏合缩放的需求，无需完全禁用该交互：

方式一：初始化地图时配置 #

在Map构造函数中通过interactiveOptions配置scrollZoom的enable回调，仅允许非鼠标滚轮触发的缩放：

mapboxgl.accessToken = 'xxx';
const MAP = new mapboxgl.Map({
    container: MAP_DIV,
    style: 'mapbox://styles/mapbox/streets-v12',
    bounds: <?php echo $mapBounds; ?>,
    interactiveOptions: {
        scrollZoom: {
            // 判断触发事件是否来自鼠标滚轮，是则禁用，否则允许
            enable: (event) => !event.sourceEvent?.type.includes('wheel')
        }
    }
});
MAP.addControl(new mapboxgl.NavigationControl({showCompass: false}));

方式二：初始化后动态调整 #

如果需要在地图加载完成后修改配置，可以调用scrollZoom.setOptions()方法：

// 移除原有的MAP.scrollZoom.disable()调用
MAP.scrollZoom.setOptions({
    enable: (event) => !event.sourceEvent?.type.includes('wheel')
});

注意事项 #

• 不要调用MAP.scrollZoom.disable()，该方法会完全禁用所有触发源的缩放交互，包括触控板。
• 你提到的相关PR功能已整合到正式版本中，核心是通过enable回调筛选触发源，而非全局禁用。

内容的提问来源于Stack Exchange，提问作者Take your Backpack