Scrollable Area (not scrolling whole artboard)
Define a scrollable area within an artboard
This provides real-world app use cases, such as a table, slideshow, or iOS dropdown lists.
Peter DiBartolo
shared this idea
Hi everyone,
I’m excited to announce that with XD 30 we’ve added support for Scroll Groups. Try it out and please let us know your feedback.
Use these resources to learn more about the feature:
1. Tutorial: https://t.co/ySNRLeDzPV?amp=1
2. Blog post: https://theblog.adobe.com/xd-june-2020-scroll-groups-stacks-more/?scid=3%202f3ddc0-7c6a-46d2-8e65-0033367b151f&mv=social&mv2=owned_social
Best,
Dan
354 comments
-
EssZett
commented
@Smonk, your "solution" is not really a proper solution. It might work just to show that a view is scrollable but it is NOT a scrollable list.
E.g. tell me how to reach the 8th list entry in this sample? It´ll always snap between TWO positions!
And it is really anoying that two screens need to be set up, each with identical processing transitions/interactions.
Furthermore it is impossible to deal with several scrollable areas at the same time. -
Smonk
commented
Not sure why you request this feature, because, this feature already works. Just created an example based on the attached screenshot file. Hope this helps.
-
Orlan
commented
It would be awesome to have multiple scrollable areas like the attached video. My vision for this to work in Xd would be that when you check the box "Fix position when Scrolling" on a group there would be another option to check if it continues below the Fold line, the content would be scrollable separately from the main scroll.
-
Anonymous
commented
Much need. thank you please.
-
Peter
commented
Please implement this it is really needed thank you :)
-
Ayub
commented
Yes, it's very needed.
-
Michael Cluff
commented
I’d use XD as my primary prototyping tool if Adobe implemented this
-
roxanne
commented
still need this
-
Tay
commented
Need this
-
Radu Ghitulescu
commented
also for the material design backdrop. please hep
-
Anonymous
commented
Still waiting for it.. zzz
-
Jamie Sundance
commented
Hi Adobe, please add this, thanks.
-
Dan
commented
Need this ASAP
-
Craig Palenshus
commented
Can someone from Adobe please give an update on this feature? Your last update on this post was 3-1/2 years ago that the feature was started -- isn't it time to provide an update?
-
Ian
commented
WOW 3 and a half YEARS and still no update!
This is such a basic thing!
WHY is it taking so long?!? Are you having workload issues?
Maybe we can crowdfund another developer so we can get things done a bit quicker? -
Adailson Filho commented
Do we have any news on that?
-
Stephen
commented
I'm also looking for this feature.
As a possible solution:
1) Add a new Component Type such as "Artboard Component ." Editing this component type would have and boundary indicator like an Artboard to define the scrollable bounds.
2) Option to add scroll boundaries to any component and allow fixed positioning toggle the same as in an Artboard in order to create more complex forms.
Hopefully that makes sense and sounds like something that is programable and easily understood by users.
-
Billy
commented
Just started using Adobe XD in production for the first time and I am little baffled this feature does not exist - even more so because people have been asking for this feature for 3 years with no success.
-
Anonymous
commented
This is a MUST HAVE feature!
-
okp
commented
Wanted to!
There's a workaround, but not a real scrolling area, but it can do the trick for quick demos:1. Create a long content which will be scrollable
2. Group it
3. Create a rectangle which will be your scrollable area (the rectangle must be above your group)
4. Right click -> Mask with a shape (or Ctrl+Alt+M). Your content is now masked with the shape.
5. Duplicate your artboard
6. On the new artboard, expand the mask group, Select your content group and move it (typically all the way up for a vertical scroll)
7. Now back to your first Artboard: Select the content group (use layers panel to expand the mask group)
8. Add an interaction : scroll / auto animation / artboard 2
9. To the same in artboard 2 on the content group: scroll/auto animation / artboard 1
10. Preview. (Try to) enjoySee example attached