Scroll with both X and Y at the same time (diagonal scrolling)

@ady wrote:

Hello!

I’m trying to make a page in my app that shows a div with the user being able to pan over it. So far I’ve got it working by using simple scrolling:

<ion-content>
  <ion-scroll scrollX="true" class="mapView" style="white-space: nowrap; overflow: scroll; height: 1000px;">
      <div style="width: 1000px; height: 1000px;">(Stuff to pan over)</div>
  </ion-scroll>
</ion-content>

And then with the page’s CSS:

.mapView .scroll-zoom-wrapper {
    width: 100%;
}

This lets me scroll both the X and Y of the entire page. The problem I’m facing is that I can’t scroll both the X and Y at the same time (diagonally). Once I start scrolling in the X axis, I have to stop scrolling before being able to scroll in the Y axis, and vice versa.

Is there a way to be able to scroll on both axis at the same time? Or perhaps a better way to accomplish this effect entirely?

Thanks very much!

Posts: 1

Participants: 1

Read full topic