Question

我有一个bingmap，其宽度和高度超过父div。然后prent 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>

Answer 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;
}

如何在bingmap焦点时禁用滚动？

1 个答案: