Making 2 columns on a page scroll separately (jasper template)

Hey

I'm trying to have these 2 columns that are placed on a single page's content with text blocks, scroll separately. Right now they are seated next to each other and scroll at the same pace with the entire's page width. Anyone got any Idea for something that would be simple to employ without inundating the page with too many code blocks to keep it simple for a client.

Here's the URL - WEBSITE LINK - password: Juliahugo @tuanphan got any ideas?

Here's an image - Need the Exhibitions and Fairs columns to scroll.

@heydanbrowne You want them to scroll at different speeds? Or scroll one, and the other doesn't?

Or you want to exhibition scroll to half, and then fairs start to scroll?

@tuanphan can you suggest how to make two content block scroll separately ? 

Basically you are wanting a page split. You might get that to work for pc, but I bet it  will really wreak havoc on the mobile view. You have to work inside the limitations of the OS not just the website itself. If you want to proceed maybe this will help you, it may not be exactly what you were thinking, but could work for you, just remember what I said about mobile view. 

thanks @derricksrandomviews for your suggestion. I was thinking of two scrolling columns on desktop and single column on mobile like this https://object.cargo.site 

Very interesting, first time I have seen that done, and it is also interesting to me that it is an Amazon hosted site. I think it is a split page, looks seamless. Nice. I think you can make it happen here as well. I learned something today. 

I guess it might be a matter of pinning a page on the left and one on the right with a maximum width of 50% and get those overlay with echother. But I can't code it 🙂 

On 4/25/2020 at 10:37 PM, lucastrano said:

@tuanphan can you suggest how to make two content block scroll separately ? 

You mean like this? https://robin-triangle-z47x.squarespace.com/cover01?password=abc

Can you share link to your site?

14 hours ago, tuanphan said:

You mean like this? https://robin-triangle-z47x.squarespace.com/cover01?password=abc

Can you share link to your site?

I would like to have a specific scroll for the left columns and a specific scroll for the right column that possibly become single column on mobile (but not overlay, only one column showing) the best example I could find its not on Squarespace unfortunately (https://object.cargo.site) 

also my squarespace website is still on trial version unfortunately 

I would also be grateful if someone knows how to achieve this on Squarespace in a clean and simple way. Here's another great example of columns that scroll separately and automatically adjust to different screen sizes... https://www.surfacemag.com

@heydanbrowne @tuanphan @pflombard - did you find a way to do this...? im looking to create a website using the two column approach. Any help appreciated. 

On 4/25/2020 at 10:51 PM, lucastrano said:

thanks @derricksrandomviews for your suggestion. I was thinking of two scrolling columns on desktop and single column on mobile like this https://object.cargo.site 

You can use position sticky to achieve this

has anyone found a solution to this? 🙂