Description
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