How to prevent scrolling page when overlay is open?


#1

Hi
I an overlay I use a swipe up and down event.
How can I prevent the background from scrolling?
I did not found anything about it in the forum.

Kind regards
Alain


#2

This is actually a common problem on a lot of websites and apps. Even this forum… when you are typing in the reply area, scrolling with a mouse wheel or trackpad drag can sometimes scroll the page behind the reply window instead of the reply input area.

I don’t know of a failsafe way to do this–and it may depend on how you are implementing your overlay–or more likely how you’ve implemented that Date tumbler. It may also depend on the device, OS, and browser you use. I don’t recall having this issue on Windows 10 and Chrome browser, nor iOS and either Safari or the Axure Cloud app–and I have done a lot of things like this with scrollable modal dialogs and multiple scrollable areas, including date and time tumblers just like yours.

Perhaps someone has a good solution for this though. It would help a lot if you could post your .rp file–or some sample file with same structure. Could be some easy fix for this that would only be obvious upon seeing your file.

In the meantime, some things you could try, more or less in order of ease and complexity…

  • In general, it should be more reliable to use a dynamic panel instead of a group for the overlay and tumblers (or any nested scrollable area in the overlay.)

  • In general, best to put scrolling and/or dragging and/or swiping events on the “parent” dynamic panel rather than the contents of that panel. Also best to stick to only one method–either scroll or drag or swipe but not combinations of these events.

  • When you show the overlay, set the focus on a widget in that overlay–if the overlay itself is scrollable. Hopefully, the browser will interpret the “domain” to be the dynamic panel instead of the whole page.

    • If the overlay itself is not scrollable, this probably won’t work, as the “scrollable domain” would still be the whole page.
  • If you have one or several “sub-areas” of the overlay which are scrollable, e.g., the Date tumbler you show, try setting focus on a widget in that nested dynamic panel using the Mouse Down event of this nested dynamic panel. This would hopefully result in scrolling this panel instead of the whole page.

  • Implement the Date and Time tumblers with Dragged events instead of scrolling. The drag on this nested dynamic panel would move the contents by using the “With Drag y” move option (and boundaries of “top less than or equals 0” and "bottom greater than or equals [[This.height]] ). The Dragged event should be triggered before the browser scroll handler.

  • A “big hammer” approach would be to wrap your whole page in a dynamic panel–basically everything except the overlay.

    • Keep the default “Never Scroll” option for this “whole page” panel.
    • Using the overlay widget’s Shown event, set the height of the “whole page” panel to the height of your viewport (your page dimensions in the STYLE pane) --This should render the page contents unscrollable.
    • In the Hidden event, set the height back to default.
      • You can use a global variable to track this height valuein the “whole page” panel’s Loaded event
      • Or, you can refer to the bottom of the bottom-most widget in the page to get the necessary height. For example, if this is a footer, use [[LVAR1.bottom]] where LVAR1 points to that footer widget.

#3

Thanks alot for your inputs.

For now I solved it by packing the swipearea into a panel.
I had to set the height of this panel to minus 1 pixel than its actual height an then set to “scroll vertical” (or “scroll as need”).
When swiping it shows the scrollbar fading in and out which is not so nice but how ever, maybe I expect to mutch :slight_smile: