How to remove bounce effect in ScrollView

[karthikraja-arumugam]

Description

The scroll view bounces while scrolled to top or end. In our project, we have 2 scroll views and on scrolling any one view we are updating the other scroll view offset. But while view bouncing we can't handle another scroll view. So we don't require a bouncing effect though.

Is there any public API to disable the bouncing effect as like in native iOS?
https://developer.apple.com/documentation/uikit/uiscrollview/1619420-bounces.

And while bouncing, the scrolled event is also not triggered in the Windows platform.

[Ghevi]

I've tried something like this but it doesn't work.

public class WkWebViewCustomRenderer : Microsoft.Maui.Controls.Handlers.Compatibility.ViewRenderer<BlazorWebView, WKWebView>
{
        protected override void OnElementChanged(ElementChangedEventArgs<BlazorWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                var webView = new WKWebView(Frame, config);
                webView .ScrollView.Bounces = false;
                webView .ScrollView.ScrollEnabled = false;
                SetNativeControl(webView );
            }
            if (e.NewElement != null)
            {
                Control?.LoadRequest(new NSUrlRequest(new NSUrl("https://0.0.0.0")));
            }
        }
    }

There is a discussion here where they mention a workaround but i don't quite get it.

[mhrastegari]

If you're using Blazor Hybrid all you have to do is set the CSS's overscroll-behavior property where that your view scrolls to none.

[Ghevi]

@mhrastegari Thanks for the suggestion I will try that out!

[kramer-e]

You can disable bounce by using ScrollViewHandler.Mapper.AppendToMapping and setting the Bounces property of the native iOS API. My suggestion is to expose this property in MAUI, because there are many use-cases in which you don't want the user to pull the view down (bouncing).

Microsoft.Maui.Handlers.ScrollViewHandler.Mapper.AppendToMapping("Disable_Bounce", (handler, view) =>
   {
#if IOS
     handler.PlatformView.Bounces = false;
#endif
    });

[cworth33]

where did you put this code?

[cworth33]

I put it into my custom scroll control that inherited from ScrollView, and that helped but didn't solve my problem. My problem is on iOS as soon as I let go of the screen it now scrolls to top or bottom of my scroll view items. This only happens on iOS. On android when I let go of my screen the scroll position doesn't change. How do I get it to behave correctly and only scroll as I'm dragging and not after I remove my finger from the screen?

[kramer-e]

This discussion is about the bounce behaviour on iOS, that the scroll view bounces past the edge of content and back again. Please check if there are any open issues that are similar to your problem, I couldn't find any that look similar in a quick search. If you can't find any, please create a bug report and add a reproduction project so that we can help you fix it.

[kramer-e]

I've made a static class to configure this global handler to customize the ScrollView and set the platform specific Bounces property, then called it from the MauiProgram class after building the app. For more information: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-8.0#customize-a-control

[FM1973]

Right direction. I had to do:

Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("Disabel_Bounce", (handler, view) => { #if IOS handler.PlatformView.ScrollView.Bounces = false; #endif });