Search code examples
javascriptjquerycssscrolltouch

Change scroll axis on mobile devices (touch)

I have a container that can be scrolled through horizontally. This was done by rotating the container by 90 degrees. This is however only a visual workaround: the visual horizontal scrolling is done by physical vertical scrolling. On mobile devices this is very counter-intuitive.

Is there any way to manipulate the scrolling behaviour so that the container can be scrolled through with horizontal touch gestures?

The scrollable container is a high vertical container that's been rotated by 90 degrees.

Here is a simplified demonstration of the container:

.item {
  background: black;
  height: 50px;
  width: 50px;
  margin: 5px;
}

.container {
  background: yellow;
  width: fit-content;
  height: 300px;
  overflow-y: scroll;
  transform: rotate(-90deg);
  transform-origin: top right;
}
<div class="container">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

Solution

  • Instead of using transform, actualy place the elements side by side in a flex container.

    Because you don't want the elements to shrink with the container size you a can set a min-width on the items:

    .item {
  background: black;
  height: 50px;
  width: 50px;
  margin: 5px;
  min-width:50px;
}

.container {
  display:flex;
  background: yellow;
  width: 300px;
  overflow-x: scroll;
}
    <div class="container">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>