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

Question

我被警告了一个我不确定如何在隐藏的 div 中阻止的行为，一旦在这个 fiddle 中单击多边形就会出现 --

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

期望的行为是我不希望背景 map (#map)在用户细读结果(#info)时滚动 他们的 click 与 div 中的垂直滚动条。

对于 CSS 解决方案有什么想法吗？它似乎只在 Firefox 中显示。 本质上，当向下滚动时， map 也会移动到它后面。

谢谢!梅根

Answer 1

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

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/