在手机上与另一个DIVs margin下的DIV交互答案

【问题标题】：Interact with DIV under another DIVs margin on the phone在手机上与另一个DIVs margin下的DIV交互
【发布时间】：2014-08-09 08:42:28
【问题描述】：

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

我设法完全使用 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。

编辑我用谷歌地图应用拍了一张照片。如您所见，抽屉可以从下到上绘制，但地图本身保持在原地，所以两者都像两层一样。

【问题讨论】：

标签： html css mobile web-applications mobile-application

【解决方案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/

【讨论】：

谢谢，但我希望列表可以在地图上滚动（因此列表应该滚动到顶部并进一步滚动）。就像谷歌地图应用对地图和底部的结果抽屉所做的那样（可以拖到顶部）
..so，而不是使用 top:200px;使用顶部：0； ..?
但我无法将列表滚动到底部（以便它显示地图并且用户可以与地图交互）。我希望你明白我的意思，它应该像谷歌地图应用一样，底部有抽屉
你无法得到你需要的东西。侧抽屉？
尝试使用hammer.js。但是，您要求的东西太多了。使用纯 css 无法将元素拉到所需位置。