Detect Scrolled to end of webview to enable a button in maui

Question

Detect Scrolled to end of webview to enable a button in maui

Keerthana Krishna 60

I have a custom renderer like this where ScrollWebView is my custom control from webview with IsBottomReached property. I tried registering this Renderer in mauiprogram class, then it started crashing with an exception of "Specified cast is not valid". Using this renderer, I am trying to find out if I have reached the end of webview. Please suggest me how I can achieve it.

Thanks in advance

public class ScrollWebViewRenderer : WebViewRenderer

{

public static ScrollWebView view = null;

public ScrollWebViewRenderer(Context context) : base(context)

{

}

protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)

{
base.OnElementChanged(e);

view = (ScrollWebView)Element;

if (Control != null)

{

    Control.ScrollChange += Control_ScrollChange;

}
}

private void Control_ScrollChange(object sender, ScrollChangeEventArgs e)

{
var nativeWebView = e.V as global::Android.Webkit.WebView;
int height = (int)Math.Floor(nativeWebView.ContentHeight * nativeWebView.Scale);
int webViewheight = nativeWebView.Height;
int cutOff = height - webViewheight;
if (e.ScrollY >= cutOff - 40)
{
view.IsBottomReached = true;
LMSGlobal.IsScrolledBottom = true;
}
else
{
view.IsBottomReached = false;
LMSGlobal.IsScrolledBottom = false;
}
}

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,121 Microsoft External Staff

Hello,

Renderer is deprecated in MAUI, where you can use Handler to implement this feature.

Please refer to the following code, I tested it on Android and it triggers the event as expected when scrolling to the bottom.


<local:ScrollWebView x:Name="scrollWeb" Source="

https://cn.bing.com/"

HeightRequest="300"/>

in code-behind:


protected override void OnHandlerChanged()

        {

            base.OnHandlerChanged();

#if ANDROID

            var s =  scrollWeb.Handler.PlatformView as Android.Webkit.WebView;

            if (s != null) {

                s.ScrollChange += (s, e) =>

                {

                    var nativeWebView = e.V as global::Android.Webkit.WebView;

                    

                    int height = (int)Math.Floor(nativeWebView.ContentHeight * nativeWebView.Scale);

                    int webViewheight = nativeWebView.Height;

                    int cutOff = height - webViewheight;

                    if (e.ScrollY >= cutOff - 40)

                    {

                        scrollWeb.IsBottomReached = true;

                   }

                    else

                    {

                        scrollWeb.IsBottomReached = false;

                    }

                };

            }

#endif

        }

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Keerthana Krishna 60 Reputation points

2024-05-03T09:50:03.51+00:00

Thanks for the response. It worked well for me.

I have one more issue with webview. I have one label and button along with webview. When I am landing to this webview page, the remaining UI controls are not rendered(not shown in the UI). When I start scrolling then the label and button are shown in UI. To avoid this scenario I added a scrollview which has webview as child. Then the UI elements are rendered properly but the above solution is not working. The scroll change event is not triggered. Do I need to add anything else.

Thanks
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,121 Reputation points Microsoft External Staff

2024-05-07T06:01:55.9366667+00:00

Thanks for your feedback.

For this issue, it is more recommended that you can create a new issue.

To ensure that you receive a clear and helpful answer to your questions, it's important to post them individually. When you have multiple questions, each with its own distinct scenario, it can make it more difficult for the community to understand the problem and provide an accurate solution. For this reason, we recommend that you create separate threads for each of your questions. This way, the community can give you their undivided attention and provide the best possible response.
Cagri Yucel 0 Reputation points

2025-04-28T18:39:18.7033333+00:00

Thanks for this Alec, how can we do the same for IOS ?

Share via

Detect Scrolled to end of webview to enable a button in maui

0 additional answers

Your answer