NestedScrollView和WebView Javascript ScrollListener

时间:2016-01-14 11:21:05

标签: android android-webview android-design-library android-coordinatorlayout android-nestedscrollview

我使用Android设计库滚动工具栏和图像。我有一个包含一些视图的片段和一个SwipeRefreshLayout,NestedScrollView和一个WebView。 这是我的布局的层次结构:

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

有了这个星座,我只有一个问题。 WebView具有内容的完整高度。 在Developer Console中,它看起来像这样:

enter image description here

有了这种行为,我无法在webview中使用javascript获取滚动位置。 有关如何在javascript中获取webview中正确滚动位置的任何建议吗?

2 个答案:

答案 0 :(得分:1)

对于所有对webview和nestedscrollview有相同问题的人。我找到了解决方案。我在nestedscrollview上设置了一个setOnScrollChangeListener,并将当前滚动位置作为javascript事件触发。

我的片段布局:

<?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>

我的片段:

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;
}
}

在网站上,您可以添加默认滚动侦听器:

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

答案 1 :(得分:0)

我看到它已经有一段时间了,但无论如何我都会尝试

我遇到了类似的问题。

我通过替换:android.support.v4.widget.NestedScrollView解决了这个问题 with:android.widget.ScrollView