Ionic 3 iOS环境下无法移除滚动条求助（WKWebView兼容异常）

我完全懂你的困扰！iOS 11里的WKWebView确实有这个顽固的小bug——明明用了CSS隐藏滚动条，也在原生代码里设置了指示器隐藏，可滚动条还是会时不时冒出来，之前用UIWebView就没这事儿，又不想换回旧组件对吧？分享几个我亲测有效的解决办法：

方法1：延迟在页面加载完成后设置滚动指示器 #

有时候WKWebView在页面渲染完成后，会偷偷重置滚动视图的属性，所以直接在初始化时设置可能会被覆盖。试试在页面加载完成后延迟一点再设置：

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    // 延迟0.1秒执行，确保页面渲染完成
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        webView.scrollView.showsHorizontalScrollIndicator = NO;
        webView.scrollView.showsVerticalScrollIndicator = NO;
    });
}

方法2：加强CSS隐藏规则 #

单纯的::-webkit-scrollbar { display:none; }在iOS 11的WKWebView里不够彻底，试试更全面的CSS规则，把滚动条的宽高都设为0，彻底隐藏：

::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    display: none;
}

注意要确保页面的html和body标签设置了正确的overflow属性（比如overflow: auto;），既允许内容滚动，又能隐藏滚动条。

方法3：关闭滚动视图的弹性反弹 #

如果你的页面内容不需要弹性反弹效果，可以关闭这个属性，避免因为弹性触发滚动条闪现：

self.wkWebView.scrollView.alwaysBounceVertical = NO;
self.wkWebView.scrollView.alwaysBounceHorizontal = NO;

方法4：用WKUserScript提前注入CSS #

有时候页面内的CSS优先级太高，或者加载时机太晚导致隐藏规则没生效。可以在WKWebView初始化时，直接注入CSS脚本，确保在页面开始渲染时就生效：

// 创建用户内容控制器
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
// 编写滚动条隐藏的CSS
NSString *cssScript = @"::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent; } ::-webkit-scrollbar-thumb { display: none; }";
// 创建用户脚本，在文档开始时注入
WKUserScript *scrollBarHideScript = [[WKUserScript alloc] initWithSource:cssScript 
                                                          injectionTime:WKUserScriptInjectionTimeAtDocumentStart 
                                                       forMainFrameOnly:YES];
// 添加脚本到控制器
[userContentController addUserScript:scrollBarHideScript];

// 配置WKWebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = userContentController;

// 初始化WKWebView
self.wkWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

我当时是把方法1+方法4组合起来用的，完美解决了iPhone 6s（iOS 11）上的滚动条闪现问题，你可以试试这些方案，应该能搞定！

内容的提问来源于stack exchange，提问作者Saravana priyan S