So, I tried to figure this out on my own for a bit and saw this, so I cloned it and tried it there. I just added a button at the very top and added an ID (for in-page linking) to the final ‘a block.’ This was my result:
Hi @matthews, what issue you were having on your site? I’m not understanding your issue yet, so you got the button to go to a link on the horizontal scroll section right? so, what is not behaving the way you want?
So I don’t think that linking elements past 100vh on the sticky section is possible. The maximum that the page will scroll on the 400vh section is 100vh because at that point it will already past the mask. Do you see what I am saying? if you want to add sections on a horizontal scroll you will need custom code, then you can achieve what you want. You can get an example of what I’m talking about and of the actual custom code that you need here Scroll Horizontally Extension - fullPage.js. Now, maybe someone else from the community knows how to do this already in webflow with no custom code, I’d be curios to see the answer. Good luck.
Like you mentioned, the mask was what was making this not work. Specifically, div ‘The Sticky Div,’ that had a height of 100vh.
So, I created a div block inside of ‘The Height 400vh Section’ with a negative Z-index. I then created 5 divs, all with 100vh inside that, as well as gave them ID’s matching their div name.
So, they are blank divs behind everything, but, when I set the button to go to div ‘500vh,’ it scrolls down 400vh.
Again, messy, and does require a lot of guess and check… but it’s functional
@matthews hey man that is great, all that matters is that it accomplishes what you want. Good job. I’m wondering if you put that ‘the sticky div’ inside a container with overflow scroll and 400 vh could work too. I’ll give it a try tomorrow and let you know!
I’m trying to replicate what @matthews did here but I’m new to Webflow and I’m having a hard time parsing his explanation and figuring out how to link to a section deeper in a horizontal scroll section.