Highlighted

2 Independent Scrollbars: Web Artboard

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

Hello, 

by desiging a UI dashboard, is there a fast way to generate two independent scrollbars, one for the side bar menu and one for the main content?

Because right know, by increasing the height of the artboard in order to trigger the scroll bar in the prototype, automatically you end up to manually increase also the height of the side menu, resulting in a long empty menu, 'cause there are not enough items. 
While if you do not increase the height of the side menu, you will end up in having an empty room of the size of the side menu column on the left. 

This is an example of what I mean (notice: visually the side menu does not shows a scrollbar, but you get the effect with the mouse wheel and the side men column scrollbar is independent from the main content)

https://colorlib.com//polygon/adminty/default/index.html

Ideally, you would have something like this in adobe xd:

dashboardscrollbar.jpg

thanks!

Correct answer by eriks1313 | Community Beginner

Voted, thanks. 

So for now we need to stay stick on an animation process like this one? 

https://youtu.be/7E3rZESl3oU?t=1044

TOPICS
How to, Prototyping

Views

468

Likes

Translate

Translate

Report

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

2 Independent Scrollbars: Web Artboard

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

Hello, 

by desiging a UI dashboard, is there a fast way to generate two independent scrollbars, one for the side bar menu and one for the main content?

Because right know, by increasing the height of the artboard in order to trigger the scroll bar in the prototype, automatically you end up to manually increase also the height of the side menu, resulting in a long empty menu, 'cause there are not enough items. 
While if you do not increase the height of the side menu, you will end up in having an empty room of the size of the side menu column on the left. 

This is an example of what I mean (notice: visually the side menu does not shows a scrollbar, but you get the effect with the mouse wheel and the side men column scrollbar is independent from the main content)

https://colorlib.com//polygon/adminty/default/index.html

Ideally, you would have something like this in adobe xd:

dashboardscrollbar.jpg

thanks!

Correct answer by eriks1313 | Community Beginner

Voted, thanks. 

So for now we need to stay stick on an animation process like this one? 

https://youtu.be/7E3rZESl3oU?t=1044

TOPICS
How to, Prototyping

Views

469

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Currently it's possible to have one scrollbar per artboard only. 

Please vote for this Feature Request:
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12869166-scrollabl...

 

It asks for a scrollable area component.

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Voted, thanks. 

So for now we need to stay stick on an animation process like this one? 

https://youtu.be/7E3rZESl3oU?t=1044

🔥 Find the Updated Version here : https://youtu.be/7E3rZESl3oU 🔥 🔥Premium Tutorials : 🔥 Udemy : https://bit.ly/3bJiajg Patreon: https://www.patreon.com/digi...

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

It's not possible to really make it work in Adobe XD, but you can fake it !

 

Use one artboard to show how the main part scrolls, with a longer viewport and a fixed position sidebar. Create a similar artboard, and swap the fixed positioned parts to show how the sidebar scrolls. The only thing you have to warn for (and restrict yourself and the demo to) is that testing this thing isn't as arbitrary one might wish. While previewing, the scrolling part will return to it's starting position (at the top). So the the test shows how both parts will scroll, but not simultaneously (in this test...)

 

You could even design the whole scenario of showing the scrolling parts safely, by using 4 artboards with animations:

1 scrolling the main part automatically down, 1 scrolling the main part automatically up again, 1 scrolling the sidebar automatically down, 1 scrolling the sidebar automatically up again. And back to screen 1.

 

Keep in mind: you're designing a mockup, a prototype at best – not building the real thing.

Likes

Translate

Translate

Report

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