React Native Android WebView 如何禁用水平滚动？答案

【问题标题】：React Native Android WebView How to disable horizontal scroll?React Native Android WebView 如何禁用水平滚动？
【发布时间】：2026-01-25 17:30:01
【问题描述】：

我的 webview 和滚动有问题。我想禁用所有滚动。我使用scrollEnabled，对于IOS，它工作正常。但是对于 android，不存在这样的属性。我尝试了很多脚本，但没有任何效果。

乍一看一切正常，但如果用户向右滑动，则文本/div 会移出屏幕。

这就是发生的事情

这是我的网页视图：

<WebView
  bounces={false}
  ref={(element) => { this.webViewRef = element; }}
  javaScriptEnabled
  scalesPageToFit={false}
  onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest}
  style={{
    height: this.state.webViewHeight,
  }}
  scrollEnabled={false}
  source={{
    html: `
          <!DOCTYPE html>
          <html>
            <head>${injectedStyle(platformStyles.fontSizes.base || 16, webViewWidth)}</head>
            <body>
              <div id="baseDiv" class="ex1">${content}</div>
              ${injectedJS}
            </body>
          </html>
    `,
    baseUrl: 'http://s3.eu-central-1.amazonaws.com',
  }}
  onNavigationStateChange={this._processNavigationStateChange}
  automaticallyAdjustContentInsets={false}
/>

我尝试添加这样的样式（overflow: 'hidden' 但它不起作用）：

    const injectedStyle = (fontSize, widhtPlatform) => `<style type="text/css">
    ...
    body {
            display: flex;
            overflow: hidden;
            background-color: orange;
    ...
        }
    div.ex1 {
      overflow: hidden;
  background-color: coral;
  border: 1px solid blue;
    ...
    }
    </style>`;

和 JS 禁用滚动：

const injectedJS = `
  <script>
    var scrollEventHandler = function()
      {
        window.scroll(0, window.pageYOffset)
      }
    document.addEventListener('scroll', scrollEventHandler, false);
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';

  </script>
`;

我们使用 RN：

react-native-cli: 2.0.1

react-native: 0.53.3

【问题讨论】：

标签： android css react-native webview

【解决方案1】：

对于 Android，将 scalesPageToFit={false} 更改为 scalesPageToFit={true}。它会起作用的。

// ....
const scalesPageToFit = Platform.OS === 'android';

// .... 
return 
    <WebView
      scalesPageToFit={scalesPageToFit}
      bounces={false}
      scrollEnabled={false}
// ....

更新：对于 rn-webview 的最新版本，取决于 html 内容，您可能还需要使用一些额外的 css 来定位有问题的内容：

max-width: 100%;

overflow-x: hidden;

和/或showsHorizontalScrollIndicator={false}

【讨论】：

这在 android 中不起作用。我尝试了代码，但页面滚动。

【解决方案2】：

npm i react-native-render-html@foundry 

import HTML from 'react-native-render-html'

 <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
      <HTML 
       contentWidth={Dimensions.get('window').width}
       onLinkPress={(e,href)=>onShouldStartLoadWithRequest(e,href)}
        html={'<p>your html</p>' }
        tagsStyles={ { p: { textAlign: 'center', fontStyle: 'normal', color: 'black' 
        ,fontFamily:'Mukta-Regular',fontWeight:'100'} }} />
 </ScrollView>

【讨论】：

【解决方案3】：

这可以用来禁用滚动条-

对于水平滚动条 - showsHorizontalScrollIndicator={false}

对于垂直滚动条 - showsVerticalScrollIndicator={false}

【讨论】：

您只会隐藏滚动条。不是问题所问的。