CODEWITHSUNDEEP
androidandroid-webviewandroid-design-libraryandroid-coordinatorlayoutandroid-nestedscrollview
Zenco
Zenco

Reputation: 2973

NestedScrollView and WebView Javascript ScrollListener

I use the Android Design Library to scroll the toolbar and an image. I have a fragment with some views and a SwipeRefreshLayout, NestedScrollView and a WebView. Here is the hierarchy of my layout:

<CoordinatorLayout>
 <RelativeLayout
  app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <FrameLayout>
    <RelativeLayout>
     <LinearLayout>
      <SwipeRefreshLayout>
       <NestedScrollView>
        <WebView/>
       </NestedScrollView>
      </SwipeRefreshLayout>
     </LinearLayout>
    </RelativeLayout>
   </FrameLayout
  </RelativeLayout>
</CoordinatorLayout>

With this constellation i have only one problem. The WebView have the full height of the content. In the Developer Console it looks like this:

enter image description here

With this behaviour i cant get the scroll position with javascript in the webview. Any suggestions how to get the correct scroll position in the webview in javascript?

Upvotes: 0

Views: 1603

Answers (2)

maya
maya

Reputation: 1

I see it's been awhile, but i'll try anyway

I had a similar problem.

I solved it by replacing: android.support.v4.widget.NestedScrollView with: android.widget.ScrollView

Upvotes: 0

Zenco
Zenco

Reputation: 2973

For all who have the same problem with the webview and the nestedscrollview. I have found a solution. I set a setOnScrollChangeListener on the nestedscrollview and fire the current scroll position as javascript event.

My fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/swRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nsvScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<WebView
    android:id="@+id/wvTest"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>

And my fragment: 

public class TestFragment extends Fragment{

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   SwipeRefreshLayout view = (SwipeRefreshLayout)inflater.inflate(R.layout.fragment_test, container, false);
    NestedScrollView nsvScrollView = (NestedScrollView)view.findViewById(R.id.nsvScrollView);
    final WebView wvTest = (WebView)view.findViewById(R.id.wvTest);
    nsvScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
        @Override
        public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            wvTest.loadUrl("javascript:scrollEvent.scrollY = " + scrollY + "; window.dispatchEvent(scrollEvent);");
        }
    });
    wvTest.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            wvTest.loadUrl("javascript:var scrollEvent = document.createEvent(\"Event\"); scrollEvent.initEvent(\"scroll\", true, true);");
        }
    });
    wvTest.getSettings().setJavaScriptEnabled(true);
    WebView.setWebContentsDebuggingEnabled(true);
    wvTest.loadUrl("http://yoursite.com");
    return view;
}
}

On the website you can add the default scroll listener:

<script>
window.addEventListener('scroll', function (e) {
    console.log("Scroll: " + e.scrollY);
}, false);
</script>

Upvotes: 1

Related Questions