Mapbox - Prevent map from zooming when scrolling past on page

Question

I have a full-width mapbox.js map on my page. When the user scrolls down the page, all is well until the curser is over the map. Then the page stops scrolling and the map wildly zooms out.

I would like users to be able to use the mouse wheel to scroll like usual, but I don't want it to happen while the user is scrolling down the page.

Has anyone dealt with this before? what would be a good way to overcome this issue?

Answer 1

Set scrollWheelZoom: false in the map options (in the docs ), like so:

var map = L.mapbox.map('map', 'mapbox.streets', {
  scrollWheelZoom: false
});

Keep in mind that mapbox.js is really just an extension of leaflet.js with some useful additions to aid in integrating w/ MB APIs, so it might also be useful to peruse the leaflet.js API docs .