I’m working on a mobile web prototype and I have an OnDrag interaction for a nested dynamic panel with top and bottom boundaries and everything works fine. However, when dragging in the panel the whole web page scrolls, which basically eliminates the usability.
How do I ignore the page scroll when dragging within the dynamic panel so this will work correctly?
https://i9dbpx.axshare.com/home.html
Thanks!
Aaron
I assume the dynamic panel you are referring is the “16 colors” overlay. This works just fine for me in Win 10 + Chrome, after clicking on any of the “16 colors” text. I can drag up/down to move the list of color swatches, no page scrolling.
If I load your URL into Safari on iOS phone it does trigger both the onDrag of the dynamic panel (for a very brief time) and the drag behavior for the browser/page (scrolling). In general, I haven’t had issues with this in my prototypes with draggable panels. I usually use the Axure Share app, but I loaded a few of my prototypes in Safari and they behaved the same. Dragging to scroll panels works fine. If the panel is initially dragged “the wrong direction” (i.e, dragging down when the panel content is already at top and can’t be dragged down any further) then it triggers the browser drag, but once the panel content moves, it behaves properly regardless of drag direction or “over-drag” (dragging beyond panel area.)
I’m curious if you have these in a repeater and if that might have something to do with the unexpected behavior. Any way you could post your .rp file or a functional facsimile of it?
I also wonder if turning on the “Prevent vertical scrolling (blocks elastic scrolling)” option in the HTML generator–Mobile/Device tab would help this.
Thanks mbc66,
Yes, the color swatch accordion. I’ll check out the Axure Share app. Not using a repeater, just copied the parent dynamic panel for quick page height to provide room to scroll. I tried the elastic scrolling block too and it didn’t work, plus I need the page to be able to be scrolled anyway.
Got it working now! You actually need to use the OnScroll interaction and select “Vertical as Needed” for Scrollbars. I tried that previously but had “None” selected as I didn’t think that would affect the functionality. Fortunately, they don’t show on mobile until the panel is scrolled so it works like a charm.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
