Ion-content/scroll locking doesn't work?

ionic-v1
#1

With ion-content I am trying to create a content area such that it can only be scrolled in one direction at a time. From the docs it seems like it can be done with locking="true". However, as seen in the following example, when you start off scrolling complete vertical or horizontal, it indeed is locked in that direction, but if you start off with an angle, it can now be scrolled in both direction:
image

ion-content and ion-scroll both behave the same way. It seems like there is no way you can actually lock it. Anyone knows how to fix this behavior?

Beta14 Slide-Box Vertical Scroll Behaviour
#2

It seems this is visible even in the zynga scroller, which is where we got our scroll-view.
Since we’re working to ditch js-scrolling soon, I’m not sure if we will do something about this.

#3

Hope this isn’t unrelated noise, but behavior-wise, this is identical to the issue from Beta 14 - Slide-box limit scroll whilst sliding.

#4

I guess I’ll have to look for an alternate solution then until the update comes.

#5

Please let us know if you find any solutions!

#6

@DerekL - Made a fix that worked for my use case: https://github.com/driftyco/ionic/pull/2814

Scrolling issues when using slidebox in list
#7

@sawchuk I just tried it out, unfortunately it doesn’t seem to fix the issue in my case. Probably this is because I’m not using a slidebox (?) but a simple ion-content instead.

#8

Ah, right. Well, hopefully our issues are connected somehow, and something from this can come in handy in debugging yours. It’s quite possible there’s a larger issue and I just put a bandaid on it.

#9

I just did a quick fix by modifying the self.doTouchMove invocation to restrict on only one direction by comparing the initial touch location and the second touch location. Seems to be working fine right now. (https://github.com/driftyco/ionic/pull/2849)

#10

You could use overflow-scroll="true" on ion-content.

This makes sure you can only swipe horizontally or vertically. Only drawback i can see so far is that the vertical scroll indicator isn’t visible anymore. I’ve used it in the following way:

<ion-slide-box>
  <ion-slide>

    <ion-content overflow-scroll="true">
      <div>...</div>
    </ion-content>

  </ion-slide>
</ion-slide-box>

And the following css:

.slider{ position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important ; right: 0 !important; }

#11

This fixed everything for me. I was able to get pager that always shows with unidirectional scrolling on a long slide in slidebox. Thanks

1 Like