Upvote 4

New Action: Control scroll position inside panel

Completed Toma Bormann 6 years ago

At the moment it's not possible to control the scroll position inside a dynamic panel.

Sure, the position of the dynamic panel itself can be controlled. I'm more interesting to control the scroll status within the dynamic panel in order to "inside"-scroll the panel automatically to a desired position. At the moment this is only possible for the whole screen. I'd like to do this only for the panel.

Example:

Imagine a search result list that is presented in map view and list view at the same time (split screen). When choosing a marker on the map the corresponding list item should scroll into visible area. List view is realized by dynamic panel with fixed height and vertical scroll enabled.

Replies (4)
photo
1

@Toma Bormann,

I actually think it's a good idea to be able to specify the pixel offset it should scroll to. But as Sonia says, you CAN scroll to a specific element. I just tried it and it let me scroll to any element inside a dynamic panel with horizontal scrolling. It's not perfect since it doesn't consider the margin the dynamic panel has, but it works.

It would be much easier though if the action would be "Scroll to position", I select a dynamic panel and then set a pixel value for horizontal and/or vertical. Then it scrolls to that pixel offset so that entering 0 will reset the scroll back to top (right now that's impossible if the dynamic panel has an inside margin).

I also noticed that "Scroll to" is animated even though the easing is set to "none" and the duration is greyed out. I have to set it to "linear" with a duration of something like 10ms so that it is instant.

photo
1

For some reasons the workaround didn't work. Perhaps I should spend a bit more time to test it

photo
1

Hm, maybe I just got lucky. I am not sure what I did, but I tried it once and it actually worked. I'll try and recreate it.

photo
photo
1

Also just realised that if you had a "Scroll to position" function, you should be able to GET the scroll position of a dynamic panel. That way you can set a variable to the current scroll position, change page and scroll to the same position. Basically like InVision has the option to "Maintain scroll position after click", which is super handy to build quick prototypes. It helps in building prototypes that rely more on different pages as states, rather than fully interactive, although in that case using InVision is probably the quicker solution anyways.

Still think it would be a handy inclusion to have the ability to jump to a precise pixel position.

photo
1

Perfect. Getting access to scroll position would open up many cool options for prototyping

photo
photo
1

+1 on wanting the ability to set a soft scroll to a specific point. Especially useful when prototyping an error message for required fields.

photo
1

While you won't be able to scroll to specific position, you can definitely scroll to an element within a dynamic panel using the "Scroll to" action.

As a workaround for not being able to enter a specific point, you can instead place a hotspot element on the position you would like to scroll to.

See the attached prototype for an example.

Leave a Comment
 
Attach a file