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，将load_data()更改为(x, _)。它会起作用。

scalesPageToFit={false}

Answer 2

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

查看官方文档link

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 个答案: