Preventing Unintended Refresh Behavior on Non-scrollable Content in a TMS WEB Core App?

Question

I'm currently refining the responsiveness of my Delphi TMS WEB Core app. However, I've encountered an issue when viewing it on mobile devices. Attempting to scroll on non-scrollable elements inadvertently triggers a page refresh (Similar to pressing F5 on Windows or Command-R on Mac).

How can I prevent this default behaviour?

The unintended refresh is particularly problematic as it restarts the app, making it impossible for users to return to their previous position. Ideally, I'd like such swipe gestures to be ignored when there’s no scrollable content.

Additionally, I'm concerned that displaying a list with fewer items than the viewport height could also result in a refresh when users attempt to swipe-scroll. I want to avoid this as well.

Has anyone faced a similar issue and can suggest a solution to disable this refresh-on-swipe behaviour for non-scrollable content in a TMS WEB Core App?

Answer 1

I'm not sure if there's a better way, but this works for me.

I've created a function to prevent a page refresh on a swipe-down or pull-down:

procedure SwipeDownRefresh(Enabled: Boolean);
begin
  if Enabled then
  begin
    TJSHTMLElement(document.body).style.removeProperty('overscroll-behavior-y');
    TJSHTMLElement(document.body.parentElement).style.removeProperty('overscroll-behavior-y');
  end else
  begin
    TJSHTMLElement(document.body).style.setProperty('overscroll-behavior-y','contain');
    TJSHTMLElement(document.body.parentElement).style.setProperty('overscroll-behavior-y','contain');
  end;
end;

To disable swipe-down refresh, simply run SwipeDownRefresh(False) and to enable run SwipeDownRefresh(True).