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

Question

我有 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

Answer 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}

Answer 2

如果您正在寻找 iOS 解决方案，请将bounces属性设置为false。

检查官方文档链接

Answer 3

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>

Answer 4

这可用于禁用滚动条 -

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

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

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

问题描述

4 个解决方案

解决方案1
11 已采纳 2018-03-08 14:52:42

解决方案2
1 2018-03-08 08:38:01

解决方案3
0 2020-12-22 06:00:05

解决方案4
-1 2021-01-31 01:35:21

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

问题描述

4 个解决方案

解决方案1 11 已采纳 2018-03-08 14:52:42

解决方案2 1 2018-03-08 08:38:01

解决方案3 0 2020-12-22 06:00:05

解决方案4 -1 2021-01-31 01:35:21

解决方案1
11 已采纳 2018-03-08 14:52:42

解决方案2
1 2018-03-08 08:38:01

解决方案3
0 2020-12-22 06:00:05

解决方案4
-1 2021-01-31 01:35:21