I’ve been helping a friend with a client site for a new pizza shop in Brooklyn.
They want to have the category menu scroll horizontal down the page but then also anchor to the section.
I feel like I am about 90% there but can’t seem to figure out how to create a smooth scroll and lock to section on click with the horizontal scroll. Seems to be either one or the other.
Here is my share link to take a look. A bit messy at the moment but any help would be GREATLY appreciated.
For horizontal scroll sections, it’s good to use a “hidden” vertical section of the same lenght and make the vertical scroll of it control the horizontal scroll of the other. This way, you just have to place IDs in that vertical sections and you’ll be able to smooth scroll to them, and at the same time scroll horizontally too.
Hi Vincent! I’m running into a similar issue here, except I noticed that in your website link you can jump to 2021 and the viewport will jump to the part that shows the start of 2021.
I recall that horizontal scroll sections don’t have anchors, could I ask how you pulled this off? We are trying to do the same with our website here, using buttons to jump to specific sections.
[https://gi-disappearances-354956297092572e8eb04.webflow.io/] - only the first two circle buttons in the navigation work as an example, and we made this using ‘Move X’ by a certain VW. But Is there a way to get it to stop at a specific ‘section’ in the horizontal frame?
I’m not linking to anything of the horizontal part, I am lining to an ID on the vertical paert, and as those 2 have a linked motion… that’s how it’s made.
Hi @vincent, I recently followed your tutorial here at the recommendation of someone else in the forums to help create a ‘detail view’ of an artwork page on my portfolio site. Thank you for sharing it! Pretty slick. In my version the scrolling seems to work properly, though I can’t get it to scroll through all of my content- only about half way.
I spent some time trying to tweak values to fix and had a developer take a look as well but I’m stumped. Any ideas?
The ‘Art Detail View’ page is the one in question. For reference, the ‘Art Page’ shows how many pieces you should be able to see on the Detail View page.
Augment the width of the div pointed in green so that all the content fits in it.
Then augment the height of the div oointed in orange to match the value you’ve set on the width of the green one.
