webiew滚动条禁用_iOS WKWebView水平滚动条的兼容问题

苹果从iOS8增加了WKWebView以来。和UIWebView和平相处多年。

WKWebView从性能上和资源使用方面确实更胜一筹。但也存在一些很奇怪的兼容问题。

各路苹果开发者大神也总结很多经验。例如，

如何从UIWebView迁移到WKWebView，采坑分享。

WKWebView和UIWebView的性能比对等。

站在前人的基础上，终于摸索了这个控件。(本人不是苹果开发者，没有系统学习过objective-c和swift。只是运用c#语言和mono框架开发iphone的工具而已)

回到兼容的这个问题，大概是这样：

在混合app中html5单页页面，各个业务逻辑视图叫做view(例如主视图)，他们的高宽都是100%沾满整个屏幕。

例如 主view和设置view。主视图的按钮触发后，主视图margin-left:-100%;，设置视图left:0px;，这样显示设置视图

主视图标题

主视图内容

设置视图标题

设置图内容

在WKWebView中，强行显示了水平的滚动条，即使在禁止缩放并且锁定缩放1.0情况下。

image.png

如图，可以左右拖动视图，inspect中查看元素，html和body显示的宽度都是100%的屏幕宽度。和图主视图是同一个大侠

这下就不能淡定了，body的overflow-x失效了。

而在PC和安卓WebView中甚至是safari浏览器中都显示正常。

我尝试了很多种方式来解决这个问题。否则app也无法正常使用。

1、最快最笨的方法

将除了主视图之外的其他视图display:none，不显示也不占据空间了。切换视图时再让它显示。这个方法不好之处在于，由于要使用简单的css3动画，切换显示隐藏导致动画失效。

2、尝试设置html，body样式overflow:hidden，设置documentElement.style.overflow

无效

3、尝试从WKWebView的ScrollView对象设置禁止滚动，依然无效。

4、最终发现，将视图view放入一个div容器，设置容器样式：width:100%;position:relative;即可解决。切记，这个容器还不能是body，否则同样没有效果。

记录下以免忘了。