How to custom WebView scroll behavior in MAUI?

Question

I developed an app for rendering HTML content with WebView and comments list with CollectionView in a ContentPage.

the pseudo-code like this:

<ContentPage>
    <ScrollView>
        <WebView x:Nam="WebView" Source={Binding Source} ></WebView>

        <CollectionView ItemsSource={Comments} > </CollectionView>
    </ScrollView>

</ContentPage>

I hope the WebView and CollectionView shared the same ScrollView. But there is no event and properties in WebView. I don't know where to start

=======

The illustration:

I'm sorry for not classifying the problem, let me illustrate it again.

This is my prototype, the red zone renders an HTML page, and the grey zone renders a CollectionView with comments, they share the same yellow scrollbar.

The WebView always stretches its height to its content, so there is no scrollbar.

The problem is in Maui, I don't know how to disable the web view scroll down/up event. when I tap in WebView, it can not trigger the scrollbar.

Thanks.

Answer 1

For ScrollView you can refer to the official doc: ScrollView. It said that:

ScrollView objects should not be nested. In addition, ScrollView objects should not be nested with other controls that provide scrolling, such as CollectionView, ListView, and WebView.

However, you can put WebView and CollectionView into StackLayout. A StackLayout will often be the child of a ScrollView.

<ScrollView>
    <StackLayout>
        <WebView Source="https://learn.microsoft.com/dotnet/maui"/>

        <CollectionView x:Name="coll" >
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}" x:Name="nn">
                    <x:String>mono</x:String>
                    <x:String>monodroid</x:String>
                    <x:String>monotouch</x:String>
                    <x:String>monorail</x:String>
                    <x:String>monodevelop</x:String>
                    <x:String>monotone</x:String>
                    <x:String>monopoly</x:String>
                    <x:String>monomodal</x:String>
                    <x:String>mononucleosis</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ScrollView>

ScrollView as a root layout.