草庐IT

javascript - 顶部的滑动菜单隐藏在 Safari 移动栏后面

coder 2024-01-12 原文

我在 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;
}

现在，这让它看起来像这样:

现在，下一步是通过添加名为“show”的类来创建它“可滑动”，这是我使用 jQuery 完成的。

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

这实际上让它变得很棒。它刚刚起作用!突然我在我的 iPhone 上尝试了这个网站，由于底部栏一直显示直到你滚动，我的臀部都不见了。

因为它看起来像这样:

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

我尽力解决了这个问题，但没有任何效果如我所愿。

PS:我假设你知道，但是当你使用 bottom: 0; 时它有点管用。 , 然后它“知道”酒吧并正确地停在它的正上方。但是因为设置是用top计算的位置，它does not做动画，这对我的设计来说是必要的。

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

最佳答案

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

其中之一是 iOS Safari 认为 100vh。
iOS Safari 中的视口(viewport)高度不等于 Chrome 或 Firefox 中的窗口内部高度。

例如在 iPhone 7plus 上 100vh == 696px，但是 window.innerHeight == 628px。
在 iPhone 6 上 100vh == 628px，但是 window.innerHeight == 559px。
等等……

所以解决方案是摆脱 100vh。
假设 body 是 .settings 的偏移父级，请改用 100%:

.settings {
    position: fixed;
    width: 100%;
    height: calc(100% + 60px);
    ...
}

.hide {
    top: -100%;
}

此外，您不需要在 .show 类中使用 calc(因为 0vh === 0):

.show {
    top: -60px;
}

关于javascript - 顶部的滑动菜单隐藏在 Safari 移动栏后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44979694/

javascriptSafaricodesectionjqueryhtmlioscss

有关javascript - 顶部的滑动菜单隐藏在 Safari 移动栏后面的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  3. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. Ruby隐藏与覆盖 - 2

    我刚刚了解到，在Java中，覆盖和隐藏之间是有区别的(静态方法是隐藏的，而不是覆盖)，这意味着Java使用早期绑定(bind)和后期绑定(bind)。是否有与方法隐藏类似的东西，或者它只是具有方法重写？ 最佳答案 Java具有三种不同的“方法”:实例方法，静态方法和构造函数。Ruby只有一个:实例方法。在Java中，静态方法的行为必须不同于实例方法，因为类不是对象。它们没有类，因此也没有父类(superclass)，因此没有要覆盖的内容。在Ruby中，类与其他任何对象一样都是对象，它们具有一个类，该类可以具有父类(superclas

  6. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. iNFTnews | 周杰伦18年前未发布的作品Demo，藏在了区块链技术里 - 2

    当音乐碰上区块链技术，会擦出怎样的火花？或许周杰伦已经给了我们答案。8月29日下午，B站独家首发周杰伦限定珍藏Demo独家访谈VCR，周杰伦在VCR里分享了《晴天》《青花瓷》《搁浅》《爱在西元前》四首经典歌曲Demo背后的创作故事，并首次公布18年前未发布的神秘作品《纽约地铁》的Demo。在VCR中，方文山和杰威尔音乐提及到“多亏了区块链技术，现在我们可以将这些Demos，变成独一无二具有收藏价值的艺术品，这些Demos可以在薄盒（国内数藏平台）上听到。”如何将音乐与区块链技术相结合，薄盒方面称：“薄盒作为区块链技术服务方，打破传统对于区块链技术只能作为数字收藏的理解。聚焦于区块链技术赋能，在

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - 下拉菜单在应该被选中的时候没有被选中……为什么？ - 2

    我正在尝试解决我们测试中的一个错误，我认为它应该有效。我很确定这是selectize或capybara中的错误，但我不明白为什么。我已经进入了capybara的源代码，一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误，我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu

随机推荐