Snap scrolling

[josehoudini]

Hey everyone! I'm trying to find some JS lines to achieve a vertical snap scrolling effect, so that each row (all set in full height) will align on the viewport based on proximity. Does anybody have a fix for this? Thanks in advance!

[Richard]

Dear @josehoudini

Is it possible to be more specific or maybe you have an example of what you wish to emulate so that the community can have a better idea? :)

But i still wish to help :)
Are options with CSS good for you?

https://css-tricks.com/practical-css-scroll-snapping/

https://developers.google.com/web/updates/2018/07/css-scroll-snap

Adding CUSTOM CSS in "Lay Options"

Are you familiar with adding Custom Javascript to Lay Theme already?

http://laytheme.com/documentation.html#custom-javascript

Just trying to understand better :)

Best wishes
Sincerely

Richard

[josehoudini]

Yes I am fully aware with what you provide just trying to achieve this https://css-tricks.com/practical-css-scroll-snapping/

[josehoudini]

Here's an example of full screen snap scrolling https://www.folchstudio.com/

[Richard]

Dear @josehoudini

@davbal Has a beautiful website where snap scrolling occurs

https://davbal.com/brickell-city-centre

Asking him may be worthwhile :)

Best
Richard

[ckid]

Dear @Richard,
is it also possible to set the scroll-snap-type for a vertical "thumbnail grid" or "element grid" with one column, since there does not seem to be a class "container" as shown in this example https://css-tricks.com/practical-css-scroll-snapping/?
Thanks in advance!

[Richard]

Dear @ckid

The Thumbnail Grid has a nice slide-into-view but not snap scrolling like the Fullscreen Slider sorry. You may wish to custom Code it. 🌝

---

Best wishes ✨

Richard