I'm encountering an issue with webview and scrolling on different devices. I have managed to disable scrolling using the scrollEnabled property for IOS, but unfortunately, this does not work for Android. Despite trying various scripts, none of them seem to solve the problem.
Initially, everything appears fine, but when a user swipes to the right side, the text/div moves off-screen.
https://i.sstatic.net/xonC5.png
This is what occurs:
https://i.sstatic.net/7v88V.png
This is my current webview setup:
<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}
/>
I also attempted to use CSS styles such as overflow: 'hidden', but it did not resolve the issue:
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>`;
To further attempt disabling scroll, I included JS code:
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>
`;
We are currently using RN:
react-native-cli: 2.0.1
react-native: 0.53.3