search

hew / react-scroll-horizontal

đź–± đź”› Scroll horizontally with the mouse wheel!
212 stars 53 forks source link

Mobile/Touch Support #4

Open hew opened 8 years ago

hew commented 8 years ago

Coming in the next update.

mbrevda commented 8 years ago

ETA?

hew commented 8 years ago

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

pavanmehta91 commented 8 years ago

can you please push touch updates for this plugin.

hew commented 8 years ago

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 commented 6 years ago

@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 commented 5 years ago

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

jjalonso commented 4 years ago

If somebody could provide implementation will be great

jonrrivera commented 4 years ago

can we see this in action please

falahati commented 3 years ago

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 commented 2 years ago

Hello, How can I use touch/mobile support?

hew commented 2 years ago

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 commented 2 years ago

+1 following for any further developments