Disable vertical scrolling when swiping on the carousel on a mobile device

[jckli]

Bugs and Questions

Prerequisites

Feel free to delete this section if you have checked off all of the following.

• [x] I've searched open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of nuka-carousel

Describe Your Environment

• What version of nuka-carousel are you using? 5.0.6
• What version of React are you using? 17.0.2
• What browser are you using? Firefox

Describe the Problem

Hey I was just wondering if there is a feature to disable the vertical scrolling when swiping through the carousel on a mobile device. Swiping through the carousel sometimes makes the whole page scroll vertically, which is not ideal.

[ValGeorgiev]

Hey @jckli, thanks for raising this with us. Could you attach a short demo, so we can test it and address the issue, please? Thanks

[jckli]

I don't want to send a video, as I don't really want to show the website publicly. But basically I'm talking about how on mobile devices, its not easy to swipe completely straight and see the next image and instead accidentally swiping a tiny bit diagonally, causing the website to scroll a tiny bit up or a tiny bit down, which is quite annoying.

I'm not sure whether or not this is already covered by the carousel, and I missed it in the docs, or not. Cheers

[ValGeorgiev]

Hey @jckli I was able to reproduce the issue in the end of the day. I created a fix and release it. It should be in v5.0.15. Thanks for raising this with us.

[jckli]

@ValGeorgiev Cool! Thanks for creating the feature.

[fritz-c]

Reopening this as it is an issue again in 5.2.0 (the previous change was reverted intentionally because it caused the bug described in #913 )

[mattzque]

I have the same issue, I see that the previous attempt at a fix was reverted (PR by @ValGeorgiev) it used "touch-action: none" on the slide. Just a note the none value is unsupported in iOS Safari i believe[1].

I'm not 100% sure but I believe the way the slick carousel is solving the issue is using "touch-action: pan-y" [2], applying it to the slider-frame element seem to fix the issue for me ~but I'm still waiting on qa~.

[1] https://caniuse.com/?search=touch-action [2] https://github.com/kenwheeler/slick/blob/7daf56cb83e1365e7b7b0ef551f4a6b6b82a0f78/slick/slick.css#L17

[ValGeorgiev]

The fix was merged, and it will be released with the next release, next week.

[mugunthan11]

when will be your next release

The fix was merged, and it will be released with the next release, next week.

[ValGeorgiev]

We get stuck with other PR, we will release immediately when the other PR is merged. Thanks for your patience