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>

來源

2017-07-26 azad

你爲什麼將一個滾動/縮放地圖包裝在一個較小的容器中的任何原因？這不是很好的用戶體驗。 – DarthJDG

@DarthJDG實際上我的地圖高度比查看端口高度要大，因此當用戶滾動到地圖底部並點擊它時，它會突然滾動。 – azad

似乎只發生在第一次點擊。正如DarthJDG所提到的，這看起來像是一個奇怪的用戶體驗，它具有可滾動div內的地圖。 – rbrundritt

最後我添加了一個補丁放到我的代碼。恢復父母（我的案例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; 
}

來源

2017-07-27 05:49:16 azad

bingmap焦點時如何禁用滾動？

回答

相關問題