Hi all! I’m new to Webflow and I’m hoping to create a website for my company that includes a section where there are three columns that scroll independently of each other.
Here’s a site that has a similar functionality: https://glasgowinternational.org/
(though we’ll want the columns to be the same width)
Any advice on if/how I could make this work using a Webflow template would be very greatly appreciated! Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey @Caitlin_Dean I made a quick video showing how you can get three columns that scroll independently of each other. Let me know if you have any questions or if this was helpful.
Hi Miguel,
I somehow can’t see this video. Any chance you can post it again?
I created a new video at this link. Let me know if you have any more questions.
Hey Miguel,
This is great. Is it possible to do this within a collection. So say 3 different divs within the CMS item each scrolling and/or having independent functionality & styling? I’ve been able to replicate what you have with static page no problem, even with multiple CMS side by side, but can it be done within 1 CMS…?
Would be great helpful and appreciated - looking forward to what you have to say!
Thanks!
@Maks_Eidelson for the browser to have a scrolling container you’d need a div surrounding each of those columns, and collection lists do a div per row.
The native way to do this in Webflow would be 3 collection lists, one per column, all bound to the same collection. Each would contain only the portion of the content you want in that scrollable column.
Another way is to setup your columnated structure and your 1 collection list separately, with all 3 items in the collection list row. Then use script to rearrange your page so that the elements are placed where you want.
SA5 Layout does this-
So what you’re saying is it’s possible, that’s a good start! ha
I’m clinging to your every word and will try to make sense of this. I will for sure try the native way first as i’m only starting to look into & get an understanding of the most basic fundamentals of script, css, js.
Will dig into SA5, i’m not familiar with it. At a quick glance looks a bit advanced but also lots of functionality.
I may reach out if I still can’t tackle this issue…
Thank you so much
SA5 Layout is much easier to use than it looks, but yes it assumes that you know enough about HTML & CSS to understand what you’re wanting to achieve with your layout at the DOM structural level.
The rest is just attributes and a library paste.
Look at the demo project & cloneable for a deeper understanding of popular use cases.
I figured it out with 3 seperate collection lists as columns - thank you!
I have another build that’s half way through and am stuck on an issue so have a question for you regarding that & SA5. Will msg you direct or start another thread.