react-indiana-drag-scroll icon indicating copy to clipboard operation
react-indiana-drag-scroll copied to clipboard

Doesn't work with scroll snapping

Open tonygustafsson opened this issue 3 years ago • 3 comments

I planned to use this great tool for creating a carousel. I didn't want a continous scroll but rather the scrolling to snap to the items with scroll-snap-type: x mandatory. This makes the scrolling area not scrollable at all.

tonygustafsson avatar Oct 09 '21 08:10 tonygustafsson

@tonygustafsson, hello!

I would recommend to use the corresponding libraries for creating a carousel. There are plenty of ones. This library is designated to solve one common simple task.

Although, you can make scroll-snap work with this library. You should disable scroll-snap while dragging for this. But it will produce another problem: when you return scroll-snap the container will be scrolled immediately without any easing (on desktop).

That's how it works.

As I know all carousels that allows dragging slides by mouse and implements some sort of scroll snap, do it on their own by scripts.

Norserium avatar Oct 09 '21 13:10 Norserium

Just remove class snap-x onStartScroll and restore onEndScroll

davigodoy avatar Feb 24 '22 21:02 davigodoy

But it will produce another problem: when you return scroll-snap the container will be scrolled immediately without any easing

scroll-behavior: smooth works in some browsers to address this.

Sam152 avatar Dec 22 '23 04:12 Sam152