Add ScrollSnap to <ScrollControls />

[AidanNelson]

Describe the feature you'd like:

I'd love to see scroll snapping added to ScrollControls to enable more control over views. In this case, you could set the number of pages and have the scrolling snap to X number of different views across those pages (i.e. full height views).

Suggested implementation:

I've started implementing this by setting scroll-snap-type on the parent element and replacing the fill container with multiple child elements with scroll-snap-align set.

That said, the behavior is quite odd at this point, and doesn't really feel 'snappy' as expected. Perhaps damping is interfering? Does anyone have a different approach to suggest here?

[drcmda]

i tried and i couldn't make it work. even just the plain vanilla snap thing feels weird to me from all the sandboxes i'm trying. but working it into scrollcontrols, i failed completely. i think this needs to be done by someone that knows the spec better than i do.

[AidanNelson]

Thanks for trying @drcmda 🙏

I found it easier to program the 'snappiness' into my r3f/threejs camera control code directly, rather than trying to enable scroll-snap. I did this by creating a number of curves to represent different parts of a camera movement, then sampling along those curves with some easing added to smooth things out. This way, I was able to program in a 'detent' at each of the stop-points (where I would have used scroll snap).

I will leave this open in case anyone has a better approach using css scroll snap. Feel free to close if you like!

[rogersanick]

I'm also having this issue! I may have to try your solution with curves / camera movement.

[rogersanick]

@AidanNelson - let me know if you are comfortable, but I'd love to see how you've handled this. Scroll snapping is sorrily missed in my implementation!

[TurbatBay]

Thanks for trying @drcmda 🙏

I found it easier to program the 'snappiness' into my r3f/threejs camera control code directly, rather than trying to enable scroll-snap. I did this by creating a number of curves to represent different parts of a camera movement, then sampling along those curves with some easing added to smooth things out. This way, I was able to program in a 'detent' at each of the stop-points (where I would have used scroll snap).

I will leave this open in case anyone has a better approach using css scroll snap. Feel free to close if you like!

Hi can you show us ur code ? i'm trying to accomplish same thing and if possible i want to see it : )

[shunmian]

Is it possible to have scroll by page feature like this?

[saori-eth]

bump