Scrolling horizontally and vertically

ionic-v1
1

I have an image element (a map specifically) that is too wide and too high to fit in the standard viewport.

I’ve tried to wrap it in a <ion-scroll direction="xy" id="map_content"> element. The horizontal scrolling works, but the vertical one bounces back the content.

This is my complete partial:

<ion-view title="Map">

  <ion-content has-header="true" has-footer="false" padding="false" scroll="false">

    <ion-scroll direction="xy" id="map_content">

      <img ng-src="img/map.png" id="map_image" alt="" />

    </ion-scroll>

  </ion-content>

  <ion-footer-bar>
    <a class="center bold black" href="maps:/?q=Amsterdam">Open locatie in Maps</a>
  </ion-footer-bar>

</ion-view>

Any ideas as to make the content fully scroll on x and y axes?

2

Not really sure, but is that image loading asynchronously? If so, perhaps test this idea.

Add a timeout (so the image has plenty of time to load, then :

$scope.$broadcast('scroll.resize')

You might also check if you are defining the dimensions of the image.

I’m thinking that the scroller sees no content on load and defines the scroll region right away before the image loads. Then, it needs to be told about the needed change in scroll region.

3

No luck unfortunately. I’ve set up a Plunkr to illustrate what I mean:

Any idea what could be the issue?

4

try removing scroll=“false” and add overflow-scroll=“true” tag from ion-content

5

That works, sort-of.

But it sometimes locks scrolling to one direction. It isn’t a true scrolling on two axis at the same time. Opening up an issue for this one.

EDIT:

6

I’ve played around with it as well and can’t seem to make a difference.

I did notice you are still including angular-touch and angular-router in you head. Those aren’t required at all anymore. They are throwing errors because they aren’t found.

Here’s a sample using the Ionic bundle. http://plnkr.co/edit/bawindLZqb1hNeNnNt0K?p=preview

You may not want to use the bundle; I normally don’t. However, you can skip those two old includes.

7

Oh yeah, that was just a remnant of an old ionic base plunker I found to build this example. I’m using the bundle in my projects already. Following the issue with interest.

8

Take a look at this post. See his solution helps you at all:

9

@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 :stuck_out_tongue:.

@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!

1 Like
10

Great ! thanks @rek, for me it works without the margin-top (on safari / safari mobile) on chrome you need the margin-top :
position:fixed;display:inline;top:0;right:0;bottom:60px;left:0; safari .
margin-top:125px;position:fixed;display:inline;top:0;right:0;bottom:60px;left:0; chrome (mobile ?).

I’m very interested in your further developments with the pinch-zoomable feature. I’m working on it too.

11

Everyone,

See Max’s comment on this :

This actually already works. Make sure your scroll area size is smaller than the size of the container element:

<ion-scroll width="500px; height: 500px" direction="xy">
  <img style="width: 1024px; height: 1024px">
</ion-scroll>

This will scroll both in the x and y direction as expected.