从顶部滑动菜单隐藏在Safari移动栏后面

Question

我在iOS Safari上的下拉设置存在严重问题。想象一个网站，顶部有一个标题。如果单击标题，它将向下滑动，就像手机上的任何通知中心一样。我选择的方式非常简单。我有<div class="settings hide">这个css：

.settings{
    position: fixed;
    width: 100%;
    height: calc(100vh + 60px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 10;
}

.hide{
    top: -100vh;
}

现在，这看起来像是这样：

现在，下一步是创建它＆＃34;可滑动＆＃34;我使用jQuery完成的，添加了一个名为＆＃34; show＆＃34;。

.show{
    top: calc(0vh - 60px);
}

这实际上很棒。它刚刚奏效！突然，我在我的iPhone上尝试了网站，由于底部栏，一直显示，直到你滚动，我的hipe一切都消失了。

因为它看起来像这样：

到目前为止？我的菜单确实正确滑动，在任何浏览器中看起来都很棒，但在Safari中，它隐藏在栏后面，因此用户实际上无法关闭它。

我尽力解决这个问题，但没有按照我的意愿行事。

PS：我认为你知道这一点，但是当你使用bottom: 0;时，它有点有用，那么它就会知道＆＃34;关于酒吧并正确地停在它上面。但由于设置是使用top位置计算的，因此does not执行动画，这是我的设计所必需的。

感谢任何帮助/解决方案！

Answer 1

大卫，不幸的是iOS Safari充满了令人不快的惊喜。

其中一个是iOS Safari认为的100vh == 696px iOS Safari中的视口高度与Chrome或Firefox中的窗口内部高度不等。

E.g。在iPhone 7plus上window.innerHeight == 628px，但是100vh == 628px 在iPhone 6上window.innerHeight == 559px，但100vh。
等等...

所以解决方案是摆脱body 假设.settings是100%的偏移父项，请改为使用.settings { position: fixed; width: 100%; height: calc(100% + 60px); ... } .hide { top: -100%; } ：

calc

此外，您不需要在.show课程中使用.show { top: -60px; } （因为0vh === 0）：

if (navigator.geolocation) {
    // Locate position
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
}

// Success callback function
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    var thediv = document.getElementById('locationinfo');
    thediv.innerHTML = '<p>Your longitude is :' +
        mylong + ' and your latitide is ' + mylat + '</p>';

// Error callback function
function errorFunction(pos) {
    alert('Error!');
}