@coen_warmer
I’m currently working on the same problem: a map that’s too big for smartphone screens and that needs to be scrollable (and pinch-zoomable, but that’s a battle for another day).
It is quite amusing. If you wrap the map in an <ion-content>, you can scroll vertically, but not horizontally.
If you wrap it in an <ion-scroll>, you can do the opposite (horizontally but not vertically). After the initial laugh, I realized where I would need to dig deeper.
I looked at the directives in ionic-angular.js and noticed that they load different css classes: .scroll-content and .scroll-view for <ion-content> and <ion-scroll> respectively.
After some fiddling (or rather ‘plunkering’), I got it to work.
Short answer:
Take your Plunker (as it is!) and add style=“margin-top:125px;position:fixed;display:inline;top:0;right:0;bottom:0;left:0;” to your <ion-scroll> - et voilà! You can now scroll up/down, right/left and diagonally; if you go too far, it bounces back; both scrollbars included.
Long(ish) answer:
- First, I just added
display: inline;, which kinda works. You can now scroll, but far beyond the image’s edges, without scrollbars and if you scroll down you overlap your other elements. - Next, I added
style=“position:fixed;top:0;right:0;bottom:0;left:0;”which gives you scrollbars and the bouncing, but since it’s now in a fixed position, you’re still faced with the overlap problem. - The solution to this problem depends on your page. In the plunker I just added
style=“margin-top:125px;”. Cheap, but gets the job done
.
@ionicTeam:
Maybe you could just expand your ionScroll directive and load a different css class if the user sets direction to ‘xy’ or ‘yx’.
I hope that helps!