开发混合应用时，如何移除WebView滚动结束的蓝色光晕？

嘿，这个问题我太熟悉了！你说的蓝色光晕其实是WebView的滚动溢出高光效果，不同平台和开发场景下的解决方法不一样，我给你逐个梳理：

一、网页端全局CSS控制（最通用，跨平台生效） #

不管你是用原生WebView还是跨平台框架，只要给嵌入的网页添加这段CSS，就能直接移除光晕，还能顺便控制滚动溢出行为：

/* 全局移除滚动边缘高光与回弹效果 */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

/* 如果需要隐藏滚动条（可选） */
::-webkit-scrollbar {
  display: none;
}

overscroll-behavior: none是核心属性，它会完全禁止滚动到边缘时的光晕、回弹等溢出行为，对所有基于WebKit内核的WebView都有效。

二、原生Android WebView #

如果是原生Android开发，直接给WebView设置overScrollMode即可：

XML布局文件中设置： #

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="never" />

代码中动态设置： #

WebView webView = findViewById(R.id.webView);
webView.setOverScrollMode(View.OVER_SCROLL_NEVER);

这个设置会同时禁用滚动到边缘的光晕和回弹效果。

三、原生iOS WebView #

iOS里的滚动光晕和bounces属性绑定，你可以通过关闭bounces来移除：

Objective-C代码： #

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
webView.scrollView.bounces = NO;
[self.view addSubview:webView];

Swift代码： #

let webView = WKWebView(frame: view.bounds)
webView.scrollView.bounces = false
view.addSubview(webView)

如果想保留滚动回弹但只移除光晕，其实更推荐用网页端的CSS方法，因为iOS原生没有直接单独关闭光晕的API。

四、跨平台框架示例 #

React Native #

给WebView组件添加平台专属属性：

import { WebView } from 'react-native-webview';

// 在组件中使用
<WebView
  source={{ uri: "你的网页地址" }}
  overScrollMode="never" // Android端禁用光晕
  bounces={false} // iOS端禁用光晕与回弹
/>

Flutter（使用webview_flutter包） #

通过AndroidNavigationDelegate和IOSNavigationDelegate配置：

import 'package:webview_flutter/webview_flutter.dart';

WebViewWidget(
  controller: WebViewController()
    ..loadRequest(Uri.parse("你的网页地址"))
    ..setPlatformNavigationDelegate(
      PlatformNavigationDelegate(
        android: AndroidNavigationDelegate(
          overScrollMode: AndroidOverScrollMode.never,
        ),
        ios: IOSNavigationDelegate(
          bounces: false,
        ),
      ),
    ),
)

内容的提问来源于stack exchange，提问作者Sarvar Abdufattokhov