2 Independent Scrollbars: Web Artboard

Question

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:

thanks!

IcKz13 · Accepted Answer

Voted, thanks. So for now we need to stay stick on an animation process like this one? https://youtu.be/7E3rZESl3oU?t=1044

Peter Villevoye · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded