I have an issue with this section, and hope someone can help.
I want to hide overflow content, so I dont have this horisontal scroll bar, but when I click “hide overflow”, it breaks the layout completely. (I’m using a sticky position for three nested sections).
I need to have the section to 1522px wide too.
Firstly, very cool site! Really digging the illustration style, colors, and subtle effects you’ve used.
As far as your issue, sticky positioning really doesn’t like non-default overflow settings or set heights, but you should be able to get around this limitation as long as these styles aren’t used on the parent of the elements you want to be position: sticky.
I haven’t tested this, however you may also be able to get around the problem by manually triggering a fixed position on these elements with an interaction instead.
I’m not really sure how I should go about that. So you’re actually suggesting to rebuild the structures so they don’t share the same parent, in order to avoid the fixed height? Puhh… Not sure how to go about that… Also, I tried to set overflow state to “hidden” on the “missions” and “all missions” section and published. But the horisontal scroll was still there, so am not sure if this is really where the issue is? I have gone through every single layer possible and set state to “hidden”…
Yeah, reworking the structure is definitely not the easiest solution to fix the problem however it’s a silly limitation of position: sticky itself.
One thing I’m noticing is that you’re using 100vw for the width of some of your sections, and that will actually cause a horizontal scrollbar itself as it doesn’t take into account the width of the scrollbar. It’s always best to use 100% for width, and reserve viewport units for height only (ex: 100vh). I can’t say for sure if this is the only reason you’re seeing the overflow, but it’s worth adjusting to test.