React-slick: Sliding on mobile device scrolls entire page

[randallreedjr]

I have only seen this happen on an actual mobile device, not in the mobile views available in either Chrome or Safari developer tools.

It appears to only affect iOS (confirmed on iPhone running 11.3 and iPhone 8 Plus running 11.4) and not Android.

React Slick mobile

Slick mobile

[randallreedjr]

May share a root cause with #1240

[randallreedjr]

This was my solution:

  constructor(props) {
    super(props);

    this.carouselSettings = {..., touchThreshold: 5, ...}; // explicitly set touchThreshold since we reference it later
    this.preventTouch = this.preventTouch.bind(this);
    this.touchStart = this.touchStart.bind(this);
  }

  componentDidMount() {
    // Disable touchmove to prevent scrolling entire page
    const carousel = document.getElementById('someid'); // Your site element containing react-slick's carousel-container
    carousel.addEventListener('touchstart', this.touchStart);
    carousel.addEventListener('touchmove', this.preventTouch, { passive: false });
  }

  touchStart(e) {
    // capture user's starting finger position, for later comparison
    this.firstClientX = e.touches[0].clientX;
  }

  preventTouch(e) {
    // only prevent touch on horizontal scroll (for horizontal carousel)
    // this allows the users to scroll vertically past the carousel when touching the carousel
    // this also stabilizes the horizontal scroll somewhat, decreasing vertical scroll while horizontal scrolling
    const clientX = e.touches[0].clientX - this.firstClientX;
    const horizontalScroll = Math.abs(clientX) > this.carouselSettings.touchThreshold;
    if (horizontalScroll) {
      e.preventDefault();
    }
  }

Thanks to @yunyong for his helpful comment.

[renetalk]

You can also solve this by giving the surrounding container a overflow: hidden

[Eth3rnit3]

That's right, @renetalk , but I'd like to point out that it's the react-slick container.

.slick-slider {
  overflow: hidden;
}

[kingalione]

Problem with the overflow: hidden hack is that the dots are then missing and I'm not able to bring them back somehow

[kingalione]

Or just disable the arrows thats working better.

[AndersonFerreira07]

.slick-slider {
overflow: hidden;
}

funcional para mim, valeu mesmo!!!

[p-akash]

.slick-slider {
overflow: hidden;
}
now dots are gone

[Yashpal100]

.slick-slider {
overflow: hidden;
}
.slick-dots {
position: static;
}

Now It will works.