Scroll inside a dynamic panel with an external button

#1

Hello everybody,

I try to build a customized scrollbar and fixed a lot of problems yet, but one thing is still a headnut. If I scroll with an external button (move the image within the dynamic panel) the scrollbar does not scroll down, it goes to 100%. If I want to scroll now via mouse or touch, I can not scroll up again. Is there any way to “scroll” the content of a dynamic panel with drag from the outside?

A simple file with the problem is attached and I work with v.8.0.0.3295

Thanks in advance and cheers.

#2

Have you tried tying the OnScroll event of the ScrollElement to the position of the ScrollButton?

#3

I need to control the scrolling with a button - that one I can drag but not scroll. So I guess I can not use the OnScroll event?

My main problem is, that the content of the dynamic panel is moving, but not scrolling, so the scrollbar enlarge to 100%. If the dynamic panel would react different (scrolling instead of moving) my problem would be fixed.

#4

Does everyone know, if I can move the inside of a dynamic panel? Because if you go into the states, the dynamic panel has always a position of 0,0. I think this would solve my problem as well.

Thanks in advance.

#5

Hi kummerlogge,

Axure RP doesn’t currently offer a direct way to scroll the contents of a dynamic panel, so I’ve gone ahead and submitted a feature request for this to our product management team for consideration.

In the meantime, a workaround would be to use the “Scroll to Widget” action with a hot spot widget that gets moved by your “ScrollButton” widget. For an example of this, take a look at the attached file.

Note: This file uses a visible rectangle widget instead of a hot spot so that you can see the mechanics in the browser more easily.

In this file, the “ScrollButton” dynamic panel’s OnMove event is moving a widget (“scroll marker”) inside the “ScrollElement” dynamic panel. That widget’s OnMove event has a “Scroll to Widget” action that scrolls the dynamic panel to itself. So as the “ScrollButton” moves the “scroll marker”, the “scroll marker” scrolls the dynamic panel.

The “ScrollElement” dynamic panel’s OnScrollUp and OnScrollDown events also have some move actions in them. These actions move the “ScrollButton” and “scroll marker” up and down when the user scrolls the dynamic panel using browser-native scrolling (mouse wheel, native scrollbar, etc.).

Notice that the "scroll marker"s OnMove event only fires when the “ScrollButton” is set to selected; conversely, the "ScrollElement"s OnScroll events only fire when the “ScrollButton” is not selected. This is to prevent the two scrolling methods from interfering with one another. The “ScrollButton” is set to selected OnDrag and is unselected OnDragDrop. Thus, the "scroll marker"s OnMove event will only fire when the user drags the “ScrollButton”, and the "Scroll Element"s OnScroll events will only fire when the user scrolls it with browser-native actions.

The downside to this approach is that the scrolling can look a little wonky. You can get a smoother scrolling effect, though, by adjusting the speed at which things are moved in the move actions:

screenshot

I hope this helps! If you have any questions about this setup, let me know.
ScrollTest_edit.rp (68.7 KB)

Relative Scroll