React Native Android WebView如何禁用水平滚动？
Luk*_*lek 4 css android webview react-native
我在使用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，请更改scalesPageToFit={false}为scalesPageToFit={true}。它会工作。
// ....
const scalesPageToFit = Platform.OS === 'android';
// ....
return
<WebView
scalesPageToFit={scalesPageToFit}
bounces={false}
scrollEnabled={false}
// ....
- 这在安卓中不起作用。我尝试了代码，但页面滚动。 (5认同)
| 归档时间： |
|
| 查看次数： |
6644 次 |
| 最近记录： |