react-carousel Disable vertical scroll (touchmove) when dragging

Currently, it's quite easy to accidentally scroll vertically when dragging (at least on iOS). This delivers a sub-par UX where you feel like you have to be really careful when you're swiping through a slideshow (it feels fragile). It should be easy to notice if you compare it do something like Zalando on iOS (or maybe any touch screen device). I was completely unable to "accidentally" scroll vertically while dragging their slider. I'm not sure how it's implemented but I'm guessing vertical touchmove is being disabled when dragging starts.

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

Checkout the Issuehunt explorer to discover more funded issues.
Need some help from other developers? Add your repositories on IssueHunt to raise funds.

Feb 08 '20 11:02 EmilEriksen

@EmilEriksen , You need to bind two events "touchstart" and "touchmove".

Feb 10 '20 09:02 shlaing

@EmilEriksen , Disable horizontal swiping while you are doing vertical swipe. This is how I solved it. However, this library should automatically handle this and It will be cool. @piotr-s-brainhub

componentDidMount() {

    this.nv.addEventListener("touchstart", this.handleNvEnter);
    this.nv.addEventListener("touchmove", this.handleNvMove);
}

componentWillUnmount() {
    this.nv.removeEventListener("touchstart", this.handleNvEnter);
    this.nv.removeEventListener("touchmove", this.handleNvMove);
}

handleNvEnter (event) {
    this.firstClientX = event.touches[0].clientX;
    this.firstClientY = event.touches[0].clientY;
}

handleNvMove (event) {

    const minValue = 10; // threshold
    const maxValue = -10;

    this.clientX = event.touches[0].clientX - this.firstClientX;
    this.clientY = event.touches[0].clientY - this.firstClientY;

    if((this.clientX > minValue || this.clientX < maxValue) && event.cancelable){
        //console.log("Window Scroll Should Stop Here")
        event.preventDefault()
    }
}

Feb 10 '20 09:02 shlaing

@piotr-s-brainhub has funded $15.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Mar 20 '20 16:03 issuehunt-oss[bot]

@piotr-s-brainhub has funded $1.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Apr 02 '20 14:04 issuehunt-oss[bot]

@piotr-s-brainhub has funded $1.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Apr 12 '20 14:04 issuehunt-oss[bot]

@shlaing

Thanks for your suggestion.

You're more than welcome to open a PR.

You could earn some money because it's funded on IssueHunt.

May 13 '20 01:05 piotr-s-brainhub

Yes @piotr-s-brainhub , I can contribute that.

May 13 '20 02:05 shlaing

@shlaing

That's great so we're waiting for a PR.

May 13 '20 02:05 piotr-s-brainhub

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $15.00) See it on IssueHunt

May 14 '20 00:05 issuehunt-oss[bot]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $1.00) See it on IssueHunt

May 14 '20 00:05 issuehunt-oss[bot]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $1.00) See it on IssueHunt

May 14 '20 00:05 issuehunt-oss[bot]

@piotr-s-brainhub has funded $18.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

May 14 '20 13:05 issuehunt-oss[bot]

@piotr-s-brainhub has funded $10.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

May 19 '20 00:05 issuehunt-oss[bot]

@piotr-s-brainhub has funded $8.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

May 26 '20 13:05 issuehunt-oss[bot]

@piotr-s-brainhub has funded $5.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

May 29 '20 11:05 issuehunt-oss[bot]

@piotr-s-brainhub has funded $10.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Jun 02 '20 13:06 issuehunt-oss[bot]

@piotr-s-brainhub has funded $1.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Jun 12 '20 14:06 issuehunt-oss[bot]

@shlaing

Are you going to work on this?

Jun 23 '20 10:06 piotr-s-brainhub

@piotr-s-brainhub has funded $20.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Jun 30 '20 11:06 issuehunt-oss[bot]

@piotr-s-brainhub has funded $5.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Jul 07 '20 13:07 issuehunt-oss[bot]

@piotr-s-brainhub has funded $2.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

Jul 08 '20 14:07 issuehunt-oss[bot]

@piotr-s-brainhub has cancelled funding for this issue.(Cancelled amount: $18.00) See it on IssueHunt