Lock web browser scroll while swiping the carousel (on mobile)

[fernandotimm]

Hi guys,

I noticed that the web browser scroll is not locked while using the carousel on mobile devices. Maybe that could be another optional attribute.

Suggested implementation:

I fixed my case adding touch-action:pan-y to the horizontalSlider so the scrolling of the browser doesn't affect my experience of using the carousel.

//src/Slider/Slider.scss
.horizontalSlider {
  ...
  touch-action: pan-y;
  ...
}

I suggest adding it as an optional boolean attribute similar.

Teachability, Documentation, Adoption, Migration Strategy:

It looks like this is a common practice. Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/touch-action Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

You can also check the carousels from airbnb (on a mobile device) to see the behavior I mentioned. https://www.airbnb.com.br/s/all?refinement_paths%5B%5D=%2Fplaylists%2F40319

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed becuase it has not had recent activity.

[tim-steele]

@fernandotimm Could you open a pull request with the suggested changes?