Streaming live at 10am (PST)

CSS Scroll snap seems worth a shot instead of js?

I have been meaning to try scroll snap for a while and this horizontal product carousel seems to work pretty well on mobile and desktop chrome and safari.

Edit : Added vertical full page scroll snap too.

https://preview.webflow.com/preview/scroll-snap-products-demo?utm_medium=preview_link&utm_source=designer&utm_content=scroll-snap-products-demo&preview=cab5fa95e8276978616674fce412f7b8&mode=preview

Very nice trick!

Thanks for sharing.

1 Like

Nice one, but… maybe still to early to adopt ?

https://caniuse.com/#feat=css-snappoints

1 Like

Yeah probably, but throw in a fallback I guess. Just been trying to get it to work both horizontally and vertically on a css grid. :exploding_head: something is not right.

Thought I would post this as it is a good run down and addresses concerns about browser support . https://youtu.be/pohyK8iz-SQ

How Did you do this??? I am trying to get it to implement on my site and it just won’t! The custom code *(even in your read only site) shows up highlighted in red, yet it still works on your site! How??

Got all your objects named in line with the code?

Yep. I combed through what you had done over and over and still can not figure it out, is there any chance you can help me with a walk through or something? I am desperately trying to get this to work and can’t for the life of me figure out how u did it

If you share the link here or PM I can take a quick look

I’ve Pm’d you the site’s read only link cause i’m just a bit nervous sharing all online, However, once it’s working, we can share the details on here if you like - just to help anyone also looking.

1 Like

So getting the overflow right is essential. The element on which scroll-snap-type is specified (.picslist in your file) needs overflow: scroll. In this full page vertical use case it needs a height of 100 vh. The element being assigned scroll-snap-align (the child element and your .section) is not where you set the height / width in this use case so remove it. Overflow for this can be default visible.

In your file change the position of BG1 from absolute to relative or static.

It’s finicky …