I have my own application that uses React Native WebView to wrap a web page.
<WebView ref={webview => (this.webview = webview)} source={{ uri: `http:
In this example, the page simply points to the localhost instance, which has the following code, which increments the number as the user scrolls:
var i = 0; var $el = document.getElementById('counter') window.addEventListener('scroll', function(e) { e.preventDefault(); i += 1; $el.innerText = i });
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)"> <div id="type"></div> <div id="counter" style="position: fixed">0</div> </body> </html>
The scroll behavior inside the React Native WebView behaves in a way that is different from the browser. It waits for the scroll to complete before the scroll event scroll .
Here is a comparison of behavior; in the browser, the scroll event is fired while the scroll is in progress, as desired and as expected:
In a React Native project in iOS 11, the scroll event fires after the scroll completes:
This behavior is apparently used for performance reasons, but that's all but killing the intended behavior of my application.
Is there any other work that I have not thought about?
How can I guarantee that the scroll event behaves the same as the browser inside my React Native app?
ios reactjs scroll react-native webview
alanbuchanan
source share