防止在iOS上滚动超出项目范围

Question

这可能已经得到了回答，但我真的很难描述这个问题。

在我的website我有地图div，顶部是透明滑块div，透明滑块下方是非透明信息div。

<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>

css允许信息div在地图上滑动。

html {
    overflow: hidden;
    height: 100%;
}

body {
    overflow: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
}

#map {
    position: fixed;
    width: 100%;
    height: 90%;
}

#spacer {
    width: 100%;
    height: 90%;
}

.info {
    z-index: 999;
    position: absolute;
    background-color: white;
    width: 100%;
    min-height: 100px;
    box-shadow: 0px 0px 10px slategrey;
}

这是一张不良影响的图片。

不应该将滑动div拉离浏览器底部。

是否有html＆amp; css解决方案？

Answer 1

我认为你在这里看到的是浏览器的缺点，可以通过使用名为-webkit-overflow-scrolling的非标准webkit规则在ios下的safari中覆盖，你可以找到有关它的信息 {{ 3}} 我过去曾多次遇到过这个问题，但我不记得找到了解决方法。

您可以尝试 here on MDN. 来绕过它，但我认为这不是一个好主意：

body.lock-position {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

您可以找到有关此问题的更多信息 this simple "hack"