Scroll snap support

[mbcod3]

Thanks for the amazing hook. It would be great if when dragging it would snap to elements.

For any container with overflow-x: scroll we can add this

scroll-snap-type: x mandatory;

and for children inside

scroll-snap-align: center;

but adding scroll snap type on the parent which has ref the drag stops working.

[rfmiotto]

Hi @mbcod3,

Let me see if I understand what you're saying: you want to propagate the scroll behavior to child components. Is that about right? Like, you have a parent component with overflow-x: scroll and a child with the same property and you want both to be draggable.

If so, I've seen some libraries that do this. I will take a took at how it is implemented and try to include this here. So far it will not work, as you realized.

In case I missed your point, please let me know.

[mbcod3]

@rfmiotto Sorry for late response. No I am not asking for child components scroll behaviour. Right now if you drag it scrolls the container. What I want is snap option where after you stop dragging it snaps to nearest child element like what css snap properties can do as I mentioned above.

But if I add the scroll-snap-type property on the container which is suppose to scroll while dragging using your hook, the drag to scroll funtionality stops working.

[rfmiotto]

Oh, now I got it.

That would be indeed a nice feature. As you noticed, once you set the hook in a given element, this CSS property will not work as expected. I believe it is necessary to implement this functionality using Javascript.

These days I'm a little bit busy, but I will definitely take a look into it in a near future.

Thank you for your suggestion @mbcod3.

[hjaber]

Oh, now I got it.

That would be indeed a nice feature. As you noticed, once you set the hook in a given element, this CSS property will not work as expected. I believe it is necessary to implement this functionality using Javascript.

These days I'm a little bit busy, but I will definitely take a look into it in a near future.

Thank you for your suggestion @mbcod3.

I was looking through your code and I could not figure out why useDraggable is disabling scroll-snap.

If anyone runs into this and has a fix, please comment. This library is great for carousels and scroll-snap is standard for carousels these days.

[nbenford]

Oh, now I got it. That would be indeed a nice feature. As you noticed, once you set the hook in a given element, this CSS property will not work as expected. I believe it is necessary to implement this functionality using Javascript. These days I'm a little bit busy, but I will definitely take a look into it in a near future. Thank you for your suggestion @mbcod3.

I was looking through your code and I could not figure out why useDraggable is disabling scroll-snap.

If anyone runs into this and has a fix, please comment. This library is great for carousels and scroll-snap is standard for carousels these days.

I've just run up against this myself. The draggable scroll feels really great, but it would be nice if it could snap to the nearest scrollable element instead of just free-scrolling.

Has anyone come up with a good workaround?

[devLeopar]

It also does not work if the parent container has scroll-behavior: smooth; I had to remove the snap and smoothness of the scroll so that this work.

[e-Naeim]

anyone solved it?

[tommyno]

A workaround is to temporary disable the scroll snap while dragging, and enable it when finished.

Example:

const onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
  ref.current.style.scrollSnapType = "none";
  ...

And remove the inline style, to enable it again when dragging is finished. Either on a mouse up:

const onMouseUp = (e: MouseEvent) => {
  ref.current.style.removeProperty("scroll-snap-type");
  ...

or a bit better, when the callBackMomentum stops:

if (
  ...
) {
  ...
  ref.current.style.removeProperty("scroll-snap-type");
}

This will make "react use draggable" work with scroll snap. But unfortunately the snap into place is incredibly janky and rough, making this kinda meaningless :/