Disable window scrolling while swiping horizontally [MOBILE]

When you start scrolling on mobile(Safari && Chrome from iOS) it is able to scroll vertically and thats bad UX. Is there any workarounds for that case. My settings: let settings = { className: this.props.className || '', infinite: true, lazyLoad: true, speed: 200, arrows: this.props.arrows, swipeToSlide: true, touchMove: true, nextArrow: <NextArrow/>, prevArrow: <PrevArrow/>, afterChange: this.props.afterChange, beforeChange: this.props.beforeChange, };

[yunyong]

How about this?

componentDidMount(){
    window.addEventListener('touchstart', this.touchStart);
    window.addEventListener('touchmove', this.preventTouch, {passive: false});
}

componentWillUnmount(){
    window.removeEventListener('touchstart', this.touchStart);
    window.removeEventListener('touchmove', this.preventTouch, {passive: false});
}

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

preventTouch(e){
    const minValue = 5; // threshold

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

    // Vertical scrolling does not work when you start swiping horizontally.
    if(Math.abs(this.clientX) > minValue){ 
        e.preventDefault();
        e.returnValue = false;
        return false;
    }
}

[xavi-tristancho]

following the code by @yunyong I’ve come up with a solution that doesn’t break the window horizontal scroll by adding the addEventListener to a div containing the react-slick component instead of the window object.

Also @iDVB I don’t think it’s a good idea to save the firstClientX, firstClientY, clientX into the state as this values do not affect the component render at all, furthermore, the setX calls are slower than just assigning the new values to normal variables defined outside the component given that the touchstart and touchmove are called about 10 times by one simple little scroll.

let firstClientX, clientX;

const preventTouch = e => {
  const minValue = 5; // threshold

  clientX = e.touches[0].clientX - firstClientX;

  // Vertical scrolling does not work when you start swiping horizontally.
  if (Math.abs(clientX) > minValue) {
    e.preventDefault();
    e.returnValue = false;

    return false;
  }
};

const touchStart = e => {
  firstClientX = e.touches[0].clientX;
};

const Slider = ({ children, ...props }) => {
  let containerRef = createRef();

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.addEventListener("touchstart", touchStart);
      containerRef.current.addEventListener("touchmove", preventTouch, {
        passive: false
      });
    }

    return () => {
      if (containerRef.current) {
        containerRef.current.removeEventListener("touchstart", touchStart);
        containerRef.current.removeEventListener("touchmove", preventTouch, {
          passive: false
        });
      }
    };
  });

  return (
    <div ref={containerRef}>
      <ReactSlick {...settings} {...props}>
        {children}
      </ReactSlick>
    </div>
  );
};