在iOS 11中，当在Webview中向下滚动时，固定的页眉会消失。

Question

在iOS 11中，当在Webview中向下滚动时，固定的页眉会消失。

42

我有一个本地的iOS应用程序，使用webview来显示网页内容。我的应用程序中有一个固定的标题，具有以下属性：

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

在升级到iOS 11之前，一切都正常工作。现在当我上下滚动页面时，标题栏会在滚动过程中消失，在滚动完成后又重新显示。

在Xcode 8中也可以重现此问题。

- Bergerova

1

也许定义 top: 0px; left: 0px; 会有帮助？ - Manuel Otto

@abarax：如果继续使用“position: fixed”，恐怕没有解决方案。建议使用position: absolute。 - Duannx

@Bergerova 请查看我编辑后的答案，苹果官方文档上说了什么？我们应该使用 WKWebView 而不是 UIWebView 或 WebView。 - iPatel

@iPatel，这对我仍然没有解决问题。使用WKWebView解决了你的问题吗？ - Bergerova

@Bergerova：根据苹果文档，你应该只使用WkWebview。你试过了吗？请告诉我。 - Dhanunjay Kumar

@Dhanunjay Kumar，是的，我已经用WKWebView替换了旧的WebView，但是固定的标题仍然消失了。 - Bergerova

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oook · Answer 1

我一直在与这个问题作斗争。

这个问题（至少在我正在开发的应用程序中表现出来）似乎只会在需要大量滚动和相当复杂的屏幕上出现。

通常，对我来说，问题似乎只有在惯性滚动开始时才真正显现。

尽管有一个特别的屏幕，其中包含15行左右可滚动的图像，无论你滚动得多慢，都会破坏页眉/页脚。

为了自我辩护...我绝对没有参与设计。 :-)

无论如何...

经过长时间的搜索和实验，我设法提出了一种“解决方案”。

请注意，我并不是在这里声称这是正确的方法。但也许比我在移动应用领域更有经验的人可以从中得到一些有用的信息。

第一部分看起来像这样：

html,
body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

然后是作为屏幕主体的容器：

.main-content-area {
    overflow-y: auto;
    height: 100%;
}

这将会影响您应用的动量滚动，这并不是很好，我知道。但是通过限制用户快速滚动的能力，屏幕渲染似乎能够跟上，问题就解决了。

再次强调，我不建议将此作为生产环境下的可行解决方案。因为显然这并不是一个好方法。

我提供这个可能只是为了帮助您找到真正的解决方案。

===>>> 更新：

我有一个可行的解决方案。但是，正如其他人指出的那样，我必须避免使用固定定位。

相反，我使用绝对定位来定义页面的页眉、页脚和主要内容部分。然后只允许在主要内容部分滚动。

如果有帮助的话，我把我编写的 POC 放在了 BitBucket 上。