javascript - 调整Firefox中div行为的滚动

有人提醒我一种行为，我不确定如何在隐藏的div中进行预防，一旦在此小提琴中单击了多边形，该隐藏的div就会出现-

http://jsfiddle.net/mkhines/pTgxa/

body {
    margin: 0;
    padding: 0;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
    position: fixed;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    height: 300px;
    overflow: scroll;
    overflow-y: auto;
    word-wrap: normal;
    max-width: 45%;
}

.info h4 {
    margin: 0 0 5px;
    color: #2b4eb6;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight: bold;
}

th {
    text-align: left;
    vertical-align: top;
}

理想的行为是，当用户使用div中的垂直滚动条细读其(#map)的结果scroll时，我不希望背景图(#info)转换为click。

对CSS解决方案有任何想法吗？它似乎只显示在Firefox.中基本上，向下滚动时，地图也向后移动。

谢谢！
梅根

最佳答案

您需要在显示弹出窗口时禁用滚动

info.update(html);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();

我添加了一个resetMapControls函数，该函数在单击“重置选择”按钮时触发。这将使您可以再次关闭滚动。

function resetMapControls(){
    map.dragging.enable();
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.enable();
}

签出以下内容：http://jsfiddle.net/pTgxa/16/

有关在下方禁用滚动的更多详细信息
https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/

关于javascript - 调整Firefox中div行为的滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24369004/