How to achieve fluent scrolling in Hybrid Maui Blazor APP?

Question

Update I've added a screencast to better demonstrate the horizontal scroll problem

I'm building a Hybrid MAUI / Blazor app. My goal is to make use of the native FlyoutPage & have the content of each page be a RAZOR page.

Problem Statement
I'm encountering a problem I can't wrap my head around and would kindly ask your help:

the vertical scrolling is terrible. Scrolling seems to stop instantly after the mouseTouch event ends which is a really terrible user experience. But when having a closer look it seems to be linked to horizontal scrolling. Vertical scrolling is non existent when "scrolling diagonal on my device". It only works when I basically make a perfect Vertical scroll. (if that makes sense)

My guess is that is linked to the android 12 stretch effect. There always seems to be a possibility for (very tiny) horizontal scrolling. Even if I disable it via CSS:

html, body, main, .container {
    max-width:100% !important;
    overflow-x:hidden !important;
    margin:0 !important;
    padding:0 !important;
    scroll-behavior:smooth !important;
}

I'm sharing some sample code to demonstrate how I hooked up Blazor into a MAUI Project. Because I might have done something wrong there.

I'm using .NET MAUI RC3 in Visual Studio 2022 (Preview)
My Project is a .NET MAUI Project (Preview) where I hooked in Blazor manually.

Appshell.xaml
In Appshell.xaml I have a FlyoutItem inside a shell:

<FlyoutItem Title="One" FlyoutIcon="{StaticResource IconOne}">
    <ShellContent
        Title="One"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="OnePage" />
</FlyoutItem>

MainPage.xaml
Inside my Mainpage I render a BlazorWebView that links to MainPage.razor

<BlazorWebView BackgroundColor="White" HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type local:MainPage}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

MainPage.razor Inside my razor page I render a long vertical list of colors (for demo purposes)

<main class="container">
    <ul>
        @foreach (var color in GetColors())
        {
            <li style="background-color:@color;">@color</li>
        }
    </ul>
</main>

@code {
    public List<string> GetColors()
    {
        List<string> colors = new List<string>();

        foreach (string colorName in Enum.GetNames(typeof(KnownColor)))
        {
            //cast the colorName into a KnownColor
            KnownColor knownColor = (KnownColor)Enum.Parse(typeof(KnownColor), colorName);
            //check if the knownColor variable is a System color
            if (knownColor > KnownColor.Transparent)
            {
                //add it to our list
                colors.Add(colorName);
            }
        }

        return colors;
    }
}

I'm adding a screenshot of the result I'm getting on my Native device (Pixel 6). Thanks in advance.

Answer 1

This css worked for me to make the horizontal scrolling completely disappear:

.noHorizontalScrolling {
    overflow-x: hidden;
    height: 100vh;
}

I applied this css class to my root-component (in my case a DxFormLayout from Devexpress)

<DxFormLayout CssClass="noHorizontalScrolling">
    @*other components...*@
</DxFormLayout>