我在 webview 和滚动方面有问题。我想禁用所有滚动。我使用了 scrollEnabled，对于 IOS，它工作正常。但对于 android 来说，不存在这样的属性。我尝试了很多脚本，但没有任何效果。
乍一看一切正常，但如果用户向右滑动，文本/div 就会移出屏幕。
事情就是这样
这是我的网页 View :
<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，将 scalesPageToFit={false} 更改为 scalesPageToFit={true}。它会起作用。
// ....
const scalesPageToFit = Platform.OS === 'android';
// ....
return
<WebView
scalesPageToFit={scalesPageToFit}
bounces={false}
scrollEnabled={false}
// ....
更新:对于最新版本的 rn-webview，根据 html 内容，您可能还需要使用一些额外的 css 来定位有问题的内容:
最大宽度:100%；
overflow-x: hidden;
和/或showsHorizontalScrollIndicator={false}
关于android - React Native Android WebView 如何禁用水平滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49156152/