Question

我想构建一个显示地图和列表的简单网络应用程序。列表应该在地图上，并且应该是可滚动的。地图应始终保持在同一位置，这样这两个项就像层一样。

我设法用HTML / CSS完全构建它，它可以在计算机上运行，但不能在手机（iPhone）上运行。

我的代码如下：

    <style>
    html {
        width: 100%;
        height: 100%;
    }
    .map {
        background-color: yellow;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .list {
        height: 2000px;
        width: 100%;
        background-color: blue;
        position: relative;
        margin-top: 200px;
        z-index: 1;
        color: white;
    }
    .layer {
        height: 100%;
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    </style>
    <body>
        <div class="map">
            MAP
        </div>
        <div class="layer">
            <div class="list"><a href="#">
                LIST
            </div>
        </div>
    </body>

当我向下滚动计算机上的列表但不在手机上时，我可以与地图进行交互。当我将css-property pointer-events: none;添加到layer-div时，我无法点击其中的链接（自然）。即使我将margin-top从list-div更改为top: 200px也无效（在手机上）。

我还为此创建了jsfiddle。

编辑我使用Google地图应用制作了一张照片。如您所见，抽屉可以从下到上绘制，但地图本身保持到位，因此两者都表现为两层。

enter image description here

Answer 1

您正在寻找的可能是：

<body>
  <div class="map">
    MAP
  </div>
 <div class="list">
    LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST<br>LIST
 </div>

的CSS：

html {
        width: 100%;
        height: 100%;
    }
    .map {
        background-color: yellow;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right:0;
        z-index: 1;
    }
    .list {
        position:fixed;
        background-color: blue;
        top: 200px;
        bottom:0;
        left:20px;
        right:20px;
        z-index: 2;
        color: white;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
}

http://jsfiddle.net/j8g6A/1/

在手机上以另一个DIV边距与DIV交互

1 个答案: