bingmap焦点时如何禁用滚动？答案

【问题标题】：how disable scrolling when bingmap focus?bingmap焦点时如何禁用滚动？
【发布时间】：2017-07-27 13:49:16
【问题描述】：

我有一个 bingmap，它的宽度和高度大于父 div。然后将 div 设置为可滚动，

"当向下滚动当前滚动条并单击 bingmap 时，父级突然滚动到顶部位置"

"或者滚动到底部并在 bingmap 外部单击并在内部单击可以看到滚动条滚动到顶部"

如何禁用此效果？

<div style="overflow: auto; width: 400px; height: 200px;">
  <div id='myMap' style='width: 100vw; height: 200vh;position: relative;'></div>
</div>
<script type='text/javascript'>
  var map;

  function loadMapScenario() {
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
      credentials: ''
    });
  }
</script>

<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>

【问题讨论】：

为什么要将滚动/缩放地图包装在较小的容器中？这不是很好的用户体验。
@DarthJDG 实际上我的地图高度超过了视口高度，因此当用户滚动到地图底部并单击它时，它会突然向上滚动。
似乎只在第一次点击时发生。正如 DarthJDG 所提到的，将地图放在可滚动的 div 中似乎是一种奇怪的用户体验。
@rbrundritt 是的，它只发生第一次点击是否有停止它？我的应用程序除了地图之外还有更多小部件等

标签： javascript bing-api bing-maps

【解决方案1】：

最后我在我的代码中添加了一个补丁。将父级（我的情况是window）滚动位置恢复到以前的位置。逻辑是当鼠标在地图上向下时保存滚动位置，当窗口滚动时恢复它。

var scrollPositionY = -1;
Microsoft.Maps.Events.addHandler(map, 'mousedown', function(e){

   scrollPositionY = document.documentElement.scrollTop || document.body.scrollTop;

   $(window).bind('scroll',preventWindowScroll);
   setTimeout(function(){
       $(window).unbind('scroll',preventWindowScroll);
   },100);
});

function preventWindowScroll(e){
   window.scrollTo(0,scrollPositionY);//restore to saved position
   e.preventDefault();
   return false;
}

【讨论】：