How do I disable mouse scroll zoom in OpenLayers 3?

Question

I'm trying to override it 'cause it's so dang sensitive. Bonus points if you can also demonstrate a elegant way to override, but, well, I can probably figure that out.

Answer 1

Simplest way I've found is to set the interaction defaults to false when you instantiate your map like so:

var map = new ol.Map({
  interactions: ol.interaction.defaults({mouseWheelZoom:false}),
  ...
});

Then once it is disabled you will need to provide your own functions to zoom on mouse scroll. Something like this should do the trick:

    map.on('mousewheel', function(e){
        e.browserEvent.preventDefault();
        var now = new Date();
        if(lastScrollZoom === null || now > lastScrollZoom ) {
            var zoom_in = e.browserEvent.deltaY < 0;
            _panAndZoom(e.map, zoom_in, e.coordinate);
            lastScrollZoom = now.setMilliseconds(now.getMilliseconds() + scrollDelta)
        }
    });

This is what I use to prevent the scroll wheel from zooming all the way in or out too rapidly. However it relies on you creating a function _panAndZoom(map,zoom_in, coordinates) and setting the lastScrollZoom and scrollDelta settings in your app.

This is my _panAndZoom function:

_panAndZoom: function(map, zoom_in, coordinates){
    var view = map.getView();
    var currentResolution = view.getResolution();
    var delta = zoom_in ? 1 : -1;
    var pan = ol.animation.pan({
         duration: 500,
        source: view.getCenter(),
        easing: ol.easing.easeOut
    });
    var zoom = ol.animation.zoom({
        resolution: currentResolution,
        duration: 500,
        easing: ol.easing.easeOut
    });
    map.beforeRender(pan,zoom);
    var newResolution = view.constrainResolution(currentResolution, delta);
    view.setResolution(newResolution);
    view.setCenter(coordinates);
},

Answer 2

In case you want to disable the scroll zoom for an already existing map, there is now a setActive method in Open Layers 3:

map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.MouseWheelZoom) {
    interaction.setActive(false);
  }
}, this);