如何防止固定到底部的 HTML 元素在 iPhone 上的 WKWebView 中滚动答案

【问题标题】：How to prevent a fixed to bottom HTML element from scrolling in WKWebView on iPhoneX如何防止固定到底部的 HTML 元素在 iPhone 上的 WKWebView 中滚动
【发布时间】：2018-08-02 16:32:13
【问题描述】：

我正在使用 Turbolinks iOS 构建一个混合应用程序，大部分应用程序都在 WKWebView 中呈现。但是我的布局有问题。屏幕底部有一个固定的导航栏，除了 iPhoneX 以外的所有手机都可以正常使用。当用户在 iPhoneX 上向下滚动时，即使导航栏的位置固定在底部，它也会向上移动导航栏，而当用户向下滚动时，它会回到原来的位置。

nav-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; 
  height: 0;
}

以下是它的行为示例：

我怎样才能完全防止底部栏移动？

PS。澄清一下，我认为这不是我的 HTML 或 CSS 的问题，它适用于所有浏览器和其他 iPhone。

【问题讨论】：

你好，你能解决这个问题吗？
不，还没有......

标签： ios swift wkwebview turbolinks-ios

【解决方案1】：

我不知道 Turbolinks 是如何工作的，但是当“安全区域布局指南”未启用时，我只在 iPhone X 上遇到了类似的导航栏问题。

之后，您可以将约束设置为该安全区域而不是您的超级视图。

以下是 Apple 关于该主题的一些参考资料：https://developer.apple.com/ios/update-apps-for-iphone-x/

【讨论】：