Block elastic scrolling on iOS

Dear Axure crew,

In a prototype I added horizontal scrollbars to a dynamic panel with a map image wider than the viewport (iPad). This works fine yet but I’d like to know if there is any possibility to block the iOS-typical elastic scrolling effect. In my special case I’d prefer if it just stopped when the end of the content is reached. Like the “old school way” :wink:

Thanks in advance,

Felix

Hi Felix, there isn’t a way to do that now but we’ll take a look to see if there is a way to suppress it. I believe iOS7 may not allow it, but we’ll have to do some research.

Hey there, did you ever find a fix for this? I am working with a scrollable panel inside an Iphone x prototype and it still has elastic vertical scrolling on the entire prototype.

Hi acustable,

You can block vertical page scrolling and elastic scrolling for your prototype in the “Mobile/Device” settings in the “Generate HTML” dialog (which you can open by going to “Publish > Generate HTML Files” in RP’s menu):

After enabling that option, you can re-publish your prototype for the changes to take affect. Let me know if this helps!

For some reason it only does it on dynamic panels that have scrolling inside of them. Other pages dont do it.

Hi acustable,

Ah, thanks for clarifying that. It looks like you’re running into the issue Victor mentioned where blocking elastic scrolling wouldn’t work for dynamic panels with scrollable content on iOS. I’ll go ahead and let our QA team know that more users are running into this, but please let us know if you have any questions or if there’s anything else we can assist you with in the meantime.

Yes that is exactly it!

Let me know if there is a walk around for this. Other than this issue, the app looks real and client is gonna dig it a ton. But cant have the app shell going everywhere when they try to scroll content inside the IOS browser.

For anyone running into a similar issue,

You can avoid triggering the elastic scroll on the page with the scrollable dynamic panel or iframe by removing the ability to scroll in any such container. Simply put: any page with scrollable content will trigger the elastic scroll, so the only option would be to remove the “scrollbility”. Rather, you can use OnDrag or OnSwipeUp/Down with the Move interaction to move the widgets inside the dynamic panel to their respective y value.

To use OnDrag, first encompass the dynamic panel widgets into a Group. This will allow you to move the Group up and down inside the dynamic panel, without moving the entire dynamic panel. OnDrag, add “Move Group with drag” and add boundaries to the Move interaction so that the Group cannot go past the height of the dynamic panel container.

To use OnSwipe, similarly encase the dynamic panel contents into a Group so that you can move the Group without moving the dynamic panel. OnSwipeUp, move the Group by (0, -y) and OnSwipeDown, move the Group by (0,y), with the same boundaries as you would add with the OnDrag.

From my testing, the OnDrag most closely resembled the ability to scroll in a dynamic panel on a mobile device. However, do note that if you have any OnSwipe events attached to the DP or widgets inside the DP, the OnDrag will not work due to conflict between the two touch gestures. This may be a reason to use the alternative OnSwipeUp/Down solution, though it also does not work as smooth as it would if it didn’t have any other touch gestures, such as OnSwipeLeft or OnSwipeRight.

At any rate, both methods should allow you to have a “scrollable” dynamic panel without triggering an elastic scroll on the iOS device, so hopefully this helps a bit!

1 Like