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.

Answers


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 */
}

Need Your Help

can't use ctrl + click with preventDefault and return false

javascript jquery ajax

I'm loading every pages in AJAX so I'm using return false on my links to load them in ajax.

Windows Error [5] : Access Denied H2o Deep Learning Framework Initialization using Python

python r windows initialization h2o

I'm using Windows 10, Anaconda 2.4.1, and Python 2.7.11 and trying to run the h2o package from oxdata.