Proposal ScrollArea | Make Scroll Area snapable on x, y or both x and y axis

[joseDaKing]

ScrollArea should also be snappable on x, y, or both x and y-axis, there should also be possible to define a easing function or integrate it with other animation libraries

[benoitgrelard]

hi @joseDaKing,

Because ScrollArea is built on top of a regular native scrolling container, all of this should work out of the box and be compatible with anything that a regular scrolling container can do.

For example, here's a demo using native CSS scroll snap:
https://codesandbox.io/s/scrollarea-scroll-snap-7umie

All I did to make this work is that the demo from our docs and add these 2 lines in the CSS:

const StyledViewport = styled(ScrollAreaPrimitive.Viewport, {
  width: '100%',
  height: '100%',
  borderRadius: 'inherit',
+  scrollSnapType: 'y mandatory',
});

const Tag = styled('div', {
  color: mauve.mauve12,
  fontSize: 13,
  lineHeight: '18px',
  marginTop: 10,
  borderTop: `1px solid ${mauve.mauve6}`,
  paddingTop: 10,
+  scrollSnapAlign: 'start',
});

That's just an example obviously, but it should help illustrate that you have access to the underlying element that scroll and thus, can do anything you want with it. I hope that helps!