经纬志
首页 / OpenLayers / 使用示例

页面滚动中的地图

地图别抢页面的滚轮,按住修饰键才缩放。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

地图嵌在长页面里时,滚轮缩放会抢走页面滚动。做法是把 mouseWheelZoom 从默认交互里关掉,再自己接管带修饰键的滚轮。

滚动滚轮时页面正常滚动,按住 Ctrl 或 Cmd 才缩放地图。passive: false 是 preventDefault 生效的前提。

要点

  • ol.interaction.defaults.defaults({mouseWheelZoom: false}) 是关闭滚轮缩放的开关。
  • deltaY 乘系数再改级别,缩放才平滑。
  • 只有按下修饰键才拦截事件,其余原样放行。

触控板双指滚动同样产生 wheel,按修饰键区分后行为一致。