Menu
I have a problem with webview and scrolling. I want to disable all scrolling. I used scrollEnabled, for IOS it works fine. But for android no property like this exists. I tried a lot of scripts but nothing works.
At first look everything seems ok but if user swipes to right side then the text/div moves outside of screen.
and this is what happened
this is my webview:
<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}
/>
and i tried to add a style like this ( overflow: 'hidden' but its doesn't work):
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>`;
and JS to disable scroll:
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 use RN:
react-native-cli: 2.0.1
react-native: 0.53.3
993
For Android change scalesPageToFit={false} into scalesPageToFit={true} . It will work.
If you subclass Webview, you can simply override onTouchEvent to filter out the move-events that trigger scrolling. public class SubWebView extends WebView { @Override public boolean onTouchEvent (MotionEvent ev) { if(ev. getAction() == MotionEvent. ACTION_MOVE) { postInvalidate(); return true; } return super.
Simple Example return ( <SafeAreaView style={{flex: 1}}> <ScrollView style={{ width: '100%' }} contentContainerStyle={{ flexGrow: 1 }} > <WebView source={{ uri: contentUrl }} originWhitelist={['*']} /> </ScrollView> </SafeAreaView> );
For Android change scalesPageToFit={false} into scalesPageToFit={true}. It will work.
// ....
const scalesPageToFit = Platform.OS === 'android';
// ....
return
<WebView
scalesPageToFit={scalesPageToFit}
bounces={false}
scrollEnabled={false}
// ....
Update: for recent versions of rn-webview depending on the html content you might need to use also some extra css to target the content that has problems:
max-width: 100%;
overflow-x: hidden;
and/or showsHorizontalScrollIndicator={false}
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
