How to do independently scrolling rows and columns (a la Netflix app) on Android in a WebView?

Question

In Netflix's Android app, there is a WebView that covers almost the entire app's area. When you drag a row left to right, it will scroll only that row, and do so using nice inertial scrolling. If you drag up and down, it will scroll the whole page up and down.

I've managed to duplicate this functionality on iOS (in a uiWebView as well as in Safari proper), but not on Android. On Android devices, anything I do is either painfully slow to scroll, or you have to be very careful scrolling vertically to start by touching in the background area between rows. Neither of which are acceptable. Obviously, I don't want to do the scrolling animation in javascript, as that will be too slow.

I know Netflix does it using a WebView, so....what is the trick they are using?

I have tried using the css properties (for the row div):

overflow-y: hidden;
-webkit-overflow-scrolling-x: touch

to no avail.

Answer 1

If you can't get the css Android compatible for your particular WebView, why not create server-side functionality that outputs only requested rows into seperate WebViews?

I would do the following:
* Query the web server to determine how many rows there are.
* Programmatically add the amount of rows that the web server says it has. For example, if the server reports that there are 5 rows, create 5 WebViews, each with their own URL params (ex: the first WebView would query mydomain.com/wv?row=1).
* Put each WebView row in a HorizontalScrollView, and put all HorizontalScrollViews in a VerticalScrollView.
* On URL change, go to a full-page WebView that displays the details of the clicked tile.
* On back pressed, close full page WebView and reload rows.

Not the cleanest of solutions, but should work fine.