How can I catch scrolling of element inside android webview

Question

I have a SwipeRefreshLayout view as a parent. Inside it i am using a webview that loads web pages. I want to reload webview by pulling down SwipeRefreshLayout. Here is my xml:

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>

and java code:

mWebView = (WebView) view.findViewById(R.id.webView);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("http://kashirskoe.vegas-city.ru/renter/");

mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.refresh_layout);
    mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            mSwipeRefreshLayout.setRefreshing(true);
            mSwipeRefreshLayout.postDelayed(new Runnable() {
                @Override
                public void run() {
                    mWebView.reload();
                    mSwipeRefreshLayout.setRefreshing(false);
                }
            }, 1000);
        }
    });

At the first blush it works perfect. But when the user is scrolling down for example a map control on the web page it's not scrolling. Instead of this SwipeRefreshLayout intercept scrolling and refresh the web page (the example page url is on the code).

I want to disable SwipeRefreshLayout scroll when any web control on the page is scrolling. Like it works in browser Google Chrome.

I think i need to inject and execute JavaScript in the webview in order to detect scroll events on any scroll control on the page. And pass it to android native code. I know how to pass it to native code.

But how can i detect this scroll events in javascript?

Answer 1

You can detect if WebView's content is scrolling by defining a custom WebView class that extends WebView and overriding the method onOverScrolleddoc here.

Start with SwipeRefreshLayout disabled and enable it when content in the WebView is not scrolling. Then, you can detect the scrolling gesture start by catching a touch DOWN event occurring on the WebView.

public class MyWebView extends WebView{
    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);

        if( clampedX || clampedY ){
            //Content is not scrolling
            //Enable SwipeRefreshLayout
            ViewParent parent = this.getParent();
            if ( parent instanceof SwipeRefreshLayout) {
                ((SwipeRefreshLayout)parent).setEnabled(true);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);

        if(event.getActionMasked()==MotionEvent.ACTION_DOWN){
            //Disable SwipeRefreshLayout
            ViewParent parent = this.getParent();
            if ( parent instanceof SwipeRefreshLayout) {
                ((SwipeRefreshLayout)parent).setEnabled(false);
            }
        }
        return true;
    }
}