在Firefox中调整div行为的滚动

时间:2014-06-23 14:52:47

标签: javascript html css

我被警告了一个行为我不知道如何防止隐藏的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;
}

当用户使用垂直滚动查看(#map)的结果scroll时,我不希望背景地图(#info)发送到click div中的酒吧。

CSS解决此问题的任何想法?它似乎只在Firefox.显示出来。从本质上讲,当向下滚动时,地图也会在它后面移动。

谢谢! 梅根

1 个答案:

答案 0 :(得分:0)

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

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

我添加了一个resetMapControls函数,该函数在单击“Reset Selection”按钮时被触发。这将在关闭时再次滚动。

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/