Scrolling causes page scroll AND map zoom in IE9 (Google maps v2)

In Internet Explorer 9, using the Google Maps API v2 (which is deprecated), zooming with the scroll wheel also causes the page to scroll. Does anyone know of a workaround for this issue? (Upgrading our codebase to v3 is not yet possible, unfortunately.) This behavior does not occur in earlier 开发者_如何学运维versions of Internet Explorer.

Here is a test page.

Many people seem to have the same problem around the net but I found no solutions posted. So here is mine:

Since non-scrollable components do not raise the scroll event and that event is non-cancelable on the document object, the standard DOM could not be used. Fortunately, there is a little jQuery plugin called "mousewheel", which adds "mousewheel" and "unmousewheel" event binding functions to jQuery. The function called by "mousewheel" event can return false to cancel it and the document then does not receive it. So I test for IE9 or bigger and download this little plugin if necessary, applying it to the div holding the map.

Please try

$('#map').mouseover( function(){ 
    document.body.style.overflow = 'hidden';
    $('#wrap').css('margin-right','17px');
    console.log('mouse -> map , ' , document.body.scroll, ' / ' , document.body.style.overflow );   
} );

$('#map').mouseout( function(){ 
    document.body.style.overflow = 'auto';
    $('#wrap').css('margin-right','0px');
    console.log('mouse map -> , ' ,  document.body.scroll, ' / ' , document.body.style.overflow);  
} );

This code hide scrollbars. I found that it is only one way to disable scrolling in IE. document.body.scroll = "no" don't work. ( IE9 )

The #map - is div with google map, the #wraper - is div with all page. $('#wrap').css('margin-right','17px'); // just to keep page width when left scroll bar hided/showed

To fix this problem with PrototypeJS 1.7 (like Marek and theazureshadow suggest) you can use on IE9:

$(gMapDiv).observe('mousewheel', function(event){
    event.stop();
});

I had the same problem, and solve it this way: When cursor is over map element and scrollwheel moves, whole-page-scrolling will be disabled. Only map will zoom in or out

$('#map').live("mouseover",function() {
  $('#map').mousewheel(function(event) {    
  stopWheel(event);

  });
})

function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */ 
    e = window.event; 
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
    e.preventDefault(); 
} 
e.returnValue = false; /* IE7, IE8 */
}