Using page section links in horizontal scroll

Hi Webflow people,

I am trying to create a page that has several ‘page section’ links followed by a horizontal scroll section holding all the section ID’s (links below).

I understand why it’s not behaving the way I want it to, but I also am struggling to think of a solution. Anyone have any ideas?

Thanks,


Here is my site Read-Only: **[https://preview.webflow.com/preview/horizontal-scroll-w-page-section-link?utm_medium=preview_link&utm_source=designer&utm_content=horizontal-scroll-w-page-section-link&preview=6ed93ba70241bafdc947376c399589c8&mode=preview]

http://horizontal-scroll-w-page-section-link.webflow.io

Hello @matthews,

I think this will put you on the right track http://horizontal-scrolling-sticky-section.webflow.io/

Hi Pablo,

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:

https://preview.webflow.com/preview/sticky-horizontal-scroll-demo-34dd85?utm_medium=preview_link&utm_source=designer&utm_content=sticky-horizontal-scroll-demo-34dd85&preview=13ddf7774b2fae2af0b8467cb69b3f6e&mode=preview

More or less the same issue I was having on my site

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?

Thanks for helping me with this.

So, for last link I added, I have the ID set on the very last ‘a block.’ The way it’s behaving now, it only scrolls to around the 3rd ‘a block.’

I added a combo class to the final ‘a-block’ that I want the button to link to and made it red so it’s easier to see what I’m referring to

Currently, it only makes it 10%-20% of the way

Hello @matthews,

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.

Thank you nonetheless. I’ll try tweaking with the mask and let you know if I am successful

@matthews I’ll keep trying and thinking of a solution too. Good Luck

I did it… in the messiest way possible

https://sticky-horizontal-scroll-demo-34dd85.webflow.io

Great job @matthews how did you do it?

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

2 Likes

@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!

1 Like

Hi hi…

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.

Is anyone able to help explain this a little more? I’m working with this, referring to the Impact by Services section: https://preview.webflow.com/preview/mc-impact-report?utm_medium=preview_link&utm_source=designer&utm_content=mc-impact-report&preview=514ac8d26b6f16a44743e36f0b6d4201&mode=preview

Thank you for any and all advice!