android - 如何让锚链接在 ScrollView 内的 WebView 中工作

Question

我有一个片段，它在 imageview 和 textview 下面有一个 webview。这一切正常。问题是 html webview 内的任何锚链接都不能正常工作。这是由于父滚动视图。我必须拥有滚动视图才能滚动整个页面（本机文本视图、图像视图和 web 视图）。

我让锚链接工作的 hacky 解决方法是删除滚动视图，并将 textview 和 imageview 放在 webview 中。然后我在 webview 中启用了嵌套滚动。然后我计算了 imageview 和 textview 的高度，并将计算出的高度作为上边距插入到 html 中（以防止 webview 与上面的 textview 和 imagview 重叠）。此解决方法的问题在于它不适用于每种屏幕尺寸。大屏幕将在 webview 和原生元素之间有足够的间距，而较小的屏幕将与 webview 和这些元素重叠。- 所以这个解决方法似乎对我不起作用。

当嵌套在 ScrollView 中时，有没有其他方法可以让 webview 中的这些 html 锚链接正常工作？

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@color/white"
             tools:context=".kotlin.MVVM.Guides.GuidesDetailFragment"
             android:layout_marginBottom="88dp">


    
<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ProgressBar
                android:layout_weight="1"
                android:id="@+id/progressBar_cyclic"
                android:visibility="gone"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minHeight="40dp"
                android:minWidth="40dp" />

            <RelativeLayout android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:id="@+id/headerView">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="190dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginBottom="8dp"
                    android:background="@drawable/guides_image_placeholder"
                    android:scaleType="fitXY"/>
                <LinearLayout
                    android:id="@+id/caption"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/image"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp"
                    android:textAlignment="textStart">
                    <TextView
                        android:id="@+id/caption_data"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#194867"
                        android:textSize="12sp"
                        android:layout_marginBottom="18dp"
                        android:fontFamily="@font/worksans_bold"
                        android:text="Dec. 21 2020, 11:53 a.m.    |   2 minute read   |   27,777 views"/>

                </LinearLayout>

                <TextView
                    android:id="@+id/article_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/caption"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginBottom="8dp"
                    android:accessibilityHeading="true"
                    android:fontFamily="@font/worksans_bold"
                    android:text="Moving In the Military"
                    android:textColor="#194867"
                    android:textSize="32sp"
                    android:maxLines="4"
                    android:textStyle="bold"/>
            </RelativeLayout>


            <WebView android:id="@+id/webview"
                     android:layout_below="@id/headerView"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                     android:layout_marginBottom="100dp"

           />

            
        </RelativeLayout>

</ScrollView>
    
</FrameLayout>

标签： androidkotlinwebviewandroid-scrollview