Skip to content

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

Open
@fernandotimm

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions