滚动会导致 IE9 中的页面滚动和地图缩放（Google 地图 v2）答案

【问题标题】：Scrolling causes page scroll AND map zoom in IE9 (Google maps v2)滚动会导致 IE9 中的页面滚动和地图缩放（Google 地图 v2）
【发布时间】：2011-08-24 10:23:15
【问题描述】：

在 Internet Explorer 9 中，使用 Google Maps API v2（已弃用），使用滚轮进行缩放也会导致页面滚动。有谁知道这个问题的解决方法？（很遗憾，我们还无法将我们的代码库升级到 v3。）这种行为在早期版本的 Internet Explorer 中不会发生。

Here is a test page.

【问题讨论】：

标签： internet-explorer-9 google-maps-api-2

【解决方案1】：

网上很多人似乎都有同样的问题，但我没有找到任何解决方案。所以这是我的：

由于不可滚动组件不会引发滚动事件，并且该事件在文档对象上是不可取消的，因此无法使用标准 DOM。幸运的是，有一个名为“mousewheel”的jQuery小插件，它为jQuery添加了“mousewheel”和“unmousewheel”事件绑定功能。 “mousewheel”事件调用的函数可以返回false来取消它，然后文档不接收它。所以我测试了 IE9 或更大版本，并在必要时下载这个小插件，将它应用到保存地图的 div 上。

【讨论】：

足够接近了。这是执行此操作的 mootools 代码（无需插件）：$('map').addEvent('mousewheel', function(event){event.preventDefault();});

【解决方案2】：

请尝试

$('#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);  
} );

此代码隐藏滚动条。我发现这只是在 IE 中禁用滚动的一种方法。 document.body.scroll = "no" 不工作。 (IE9)

#map - 是带有谷歌地图的 div， #wraper - 是所有页面的 div。 $('#wrap').css('margin-right','17px'); // 只是为了在隐藏/显示左滚动条时保持页面宽度

【讨论】：

【解决方案3】：

要使用 PrototypeJS 1.7（如 Marek 和 theazureshadow 建议）解决此问题，您可以在 IE9 上使用：

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

【讨论】：

【解决方案4】：

我遇到了同样的问题，用这种方式解决：当光标在地图元素上并且滚轮移动时，整个页面滚动将被禁用。只有地图会放大或缩小

$('#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 */
}

【讨论】：

这是我对所选答案的评论中代码的不优雅的重新散列，可能很容易转换为 jQuery。