How to Scroll asynchronously on different containers of a same layout

[Florian_FR]

Hello Themeco Team,

How are you all doing?

I’m reaching out because I could really need your expertise on a technical issue that I can’t seem to solve.

In a simple Grid Layout (dashboard-style) with two columns, I’m trying to make each cell scroll independently.

I’ve tried quite a few things — including setting the “Y-Overflow” property to “scroll” on a container

inside each cell — but nothing seems to work: the scroll remains synchronized between both cells.

Since I know some parameters are interdependent (like how position: sticky depends on a parent with overflow: visible, for example), I’m wondering if there’s a key detail I might be missing here.

Should I be using position: absolute or relative in this case? Do Flexbox settings affect overflow behavior inside Grid elements?

After a few tests, and seeing again all Themeco Grid videos on YouTube, I just haven’t been able to get it working.

Here’s how the layout is structured:

• Both grid cells have min-height: 100vh

• The sidebar (cell 1) contains three child elements:

  • The first is sticky at the top
  • The second should scroll independently from cell #2
  • The third is sticky at the bottom

Do you, as experts with the builder, have any insight or tips that could point me in the right direction?

I’ve attached an example for clarity.

Thanks so much in advance !

Florian

[ruenel]

Hey Florian,

Thank you for the very detailed post information. We would be happy to check your GRID layout and see what is missing why the independent scrolling is not working… You can create a secure note in your next reply with the link to the PAGE where you have the GRID layout.

And if you would like us to tinker the GRID layout, we may need the following:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Florian_FR]

Hi @ruenel

And thank you for your reply.

Here is the credentials, in the secret note.

Thanks for help

Florian

[ruenel]

Hey Florian,

It is best to create it in a test page and not as a component.
Kindly check out the demo I created in the secure note below.

Thanks.

[Florian_FR]

Hi @ruenel

Thanks for your reply.
yes, this is indeed the expected behavior of the blocks

thanks to you, I am now sure that a grid element can have this desynchronized double scroll behavior, and it’s great !

But finally, do you mean that the y-overflow didn’t work because it went through a “single layout” before going through a page instead of going directly to a page ? or it works now because you applied the y-overflow property to a “new global div” container right under each Cell Element ?

Thank you

Florian

[ruenel]

Hey Florian,

The y-overflow should work in any of the layout. You should have to define the width and the height of the DIV to at least 100%. I just suggested to create it in a Test page to make it easier to view the page live.

Cheers.

[Florian_FR]

Hey @ruenel

thanks for reply

I just suggested to create it in a Test page to make it easier to view the page live.

Yes there is a live version loaded on a page, I indicated the link in our previous exchange in secure note.
The component Document fits my needs to generates and maintains Elements libraries.

The y-overflow should work in any of the layout. You should have to define the width and the height of the DIV to at least 100%

If the y-overflow should work in any layout, i still don’t understand why it works on your example test (you did Component document AND page Document, right ?) and not on my component who have exactly the same settings and same structure… that’s the issue i have.

I don’t see why it doesn’t work on my Component document as well… do you have an idea about it ?

thanks

[Edit: Nevermind ! i fixed it everything works well now, thank you ]

[christian]

Glad to hear you’ve sorted it.`