Mobile/Touch Support

[hew]

Coming in the next update.

[mbrevda]

ETA?

[hew]

I can push it out this weekend maybe. It's coded, just been busy.

[pavanmehta91]

can you please push touch updates for this plugin.

[hew]

So just to keep everyone updated:

I have been working on this. I thought I had a quick fix, but it turns out it wasn't viable. I think I am close to a solution using react-draggable but it's not there yet. Of course, if anyone wants to try tackling this, I am more than open to pull requests.

[zachgibson]

@hew I’m working locally on a fork and I got it working with Draggable. But… It’s weird. I wrap everything in Draggable, set it to only drag horizontally, then set the first child transform CSS to translate(0px, 0px)!important. This gives me a deltaX value without actually moving any UI on drag. I then set animValues state with this value.

I think this approach is fine because we need a way to not actually drag UI, but let React Motion handle the movement, so the “ghost” UI makes sense.

Some possible Issues with this approach:

1. Draggable still tries to set translate on drag but we don’t use this at all
2. Loading all of Draggable just to get a onDrag method

Performance wise this works perfectly for me. It’s very smooth and looks nice.

[quinnliu]

@hew @zachgibson I am curious if any1 minds providing example code 4 how 2 implement this? Thanks from a fan :)

[jjalonso]

If somebody could provide implementation will be great

[jonrrivera]

can we see this in action please

[falahati]

A quick and dirty solution to allow scrolling via touch devices is to use the following SCSS/less style:

@media (hover: none), (pointer:coarse), (-moz-touch-enabled: 1) {
    .scroll-horizontal {
        overflow: scroll !important;
        overflow: overlay !important;
        overflow-x: scroll !important;
        overflow-x: overlay !important;
        overflow-y: hidden !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;

        &>div {
            transform: none !important;
            position: relative;
        }

        &::-webkit-scrollbar {
            display: none !important;
        }
    }
}

[flimybook]

Hello, How can I use touch/mobile support?

[hew]

A quick and dirty solution to allow scrolling via touch devices is to use the following SCSS/less style:

@media (hover: none), (pointer:coarse), (-moz-touch-enabled: 1) {
    .scroll-horizontal {
        overflow: scroll !important;
        overflow: overlay !important;
        overflow-x: scroll !important;
        overflow-x: overlay !important;
        overflow-y: hidden !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;

        &>div {
            transform: none !important;
            position: relative;
        }

        &::-webkit-scrollbar {
            display: none !important;
        }
    }
}

Interesting! Thanks for sharing.

[jamesryan-dev]

+1 following for any further developments