Anchors with CSS snappy scrolling

Hello everyone,

I am looking to use css snappy scrolling effect for my website
(like so: https://css-tricks.com/practical-css-scroll-snapping/),
but I can`t find any way to make the anchors and scroll animations work, because the snappy scrolling requires the scroll overflow to the main wrapper, which removes the scrollbar.

Is there any way to make it work?

I tried using fullpage js script to achieve this effect, but I prefer css result way more.

Looking forward to getting your replies, thank you!

hi @heretic-k and welcome I have created for you an EXAMPLE to see a used code and structure (look also into embed code in CUSTOM CSS ). Because this slider is not functional in preview mode here is link to LIVE page .

Hope that will help you to understand how to do that.

1 Like

Hi Stan,
Thank you very much for your reply and your time to prepare an example!

I’m afraid I don’t see any links and anchors in your solution.
I managed to do the scroll itself, but the problem is I have no idea how to make anchors and “scrolled into view” animations work.

so you want snapping for page scroll (down-up), or ?
Best way is to share projects read-only link to see your page (code) and add detail description. You have mentioned links it can also mean that you want just snap to page section with link click e.g from menu -> section. It’s hard to understand you trying achieve.

Hi Stan,

Thank you!

Sorry for a bad explanation - unfortunately, my project has completely changed in the last couple of days and I have nothing to share via read-only link.
I ended up using fullpage js, and changed the design to fullpage scroll instead of snappy scroll.

My goal was to find a way to make anchors work with css snappy scroll in a way you mentioned (i.e. menu> section), and also make scroll animations work (none of that worked for me with css snappy scroll).

I would still like to know how to do it if you know the solution!

Cheers!

I will recommend you to watch all videos on Webflow University to get basics how to work with Webflow. :wink: