bingmap焦点时如何禁用滚动?
问题描述:
我有一个bingmap它的宽度和高度比父div更多。然后Prent公司格设置为滚动,bingmap焦点时如何禁用滚动?
“上下滚动时Prent公司滚动条,点击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>
答
最后我添加了一个补丁放到我的代码。恢复父母(我的案例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;
}
你为什么将一个滚动/缩放地图包装在一个较小的容器中的任何原因?这不是很好的用户体验。 – DarthJDG
@DarthJDG实际上我的地图高度比查看端口高度要大,因此当用户滚动到地图底部并点击它时,它会突然滚动。 – azad
似乎只发生在第一次点击。正如DarthJDG所提到的,这看起来像是一个奇怪的用户体验,它具有可滚动div内的地图。 – rbrundritt