Multiple panel scrolling in one page

Hi,

I am trying to create a web prototype where I have 3 panels on the same page that scrolls independently (all are vertical scroll).
Is this possible?

Thanks

Yes, just create three frames (in this case they will be placed instead of the purple, blue and orange rectangles) and enable vertical scrolling in them.

1 Like

Based on this answer, is it possible for elements in the three sections to be connected/anchored with a line. If you move one of the elements by scrolling the section the line is always anchored to that same spot.

Hello @Manuel_Calero , I’m designing something similar - I want to scroll frame A and make frame B and C scroll automatically in sync with frame A.
I’m exploring the idea of having those 3 frames connected with a line but didn’t quite figure it out. Could you elaborate more on how to design this out? Thank you very much in advanced!

Hey @Anqi_Yang1 ! You can see an example from the following post:

Hope this is what you are looking for.

Hey @tank666! Big thank for pointing me to the example! I have realized the same effect in my design as well, and the logic behind it was the same as yours. But I got stuck when I want to add one more layer of complexity:

  • Say that we also have some squares in the frame of #sidebar;
  • When scrolling #content horizontally, #sidebar has its position fixed;
  • When scrolling #top vertically, #sidebar will be scrolled in tendon with #top, while #bottom remains at the same position;

In short, what I wanted to achieve here is an interactive Gantt chart with 3 scrollable parts: name list (#sidebar), Gantt chart with blockers (#content) and header for date (#bottom). Feel free to reach out if you’d like to see something more concrete than my description. :smiley:

Do you have any ideas on how could I make this happen? I’m looking forward to bouncing ideas with you!