[Prototype]-Scroll content inside an inner container in XD.

New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

I'm starting out with Adobe XD. I have done the toturial an I learned how to make content of page scroll. But what I wish to design is a bit different then a full page content scroll (please see attached image).

Annotation 2020-04-06 173435.png

As you can see in the image:

  • I have a background (redish color - in my actual design it's an image which I have checked "Fix position when scrolling".
  • I have an inner container (white) that contains 2 side menus and another container (gray).
  • The inner grain container has a search field on top, a title and posts.

What I would like to have is to scroll the title and the posts inside the inner gray container (not hiding the background image, and not hiding the search box while scrolling - meaning an internal scrolling for a container and no a full page.

Hope I have made my problem clear. Is such thing possible?

TOPICS
Product performance, Prototyping

Views

195

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Apr 06, 2020

Copy link to clipboard

Copied

Yes. You just have to think differently and break your containers in to parts. What you want to do is make to rectangles that will act as a 'mask'.  Have them in a higher order. The other elements can be fixed position.

Annotation 2020-04-06 173435.png

 

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Ophir82 AUTHOR
New Here ,
Apr 07, 2020

Copy link to clipboard

Copied

Hi,

 

Thanks for the response. I don't fully understand masks yet, so I don't fully understand the solution. I have tried making the backgound ("one mask") as the mask and it had lost the color, but the entire content still scolls.

Any good place to learn about masks?

 

Thanks

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Apr 07, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. I found a tutorial and help article, which you may refer and let us know if that helps or if you need any further assistance.

 

https://helpx.adobe.com/in/xd/how-to/mask-in-xd.html

https://helpx.adobe.com/in/xd/help/combine-mask-objects.html

 

Regards

Rishabh

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more