Don't scroll list vertically while swiping a list-item horizontally?

ionic-v1
1

Hi,

is it somehow possible to prevent an ion-list from scrolling vertically while one of it’s items is being swiped horizontally?

Thanks,
Andreas

4 Likes
2

I am also trying to achieve this, with no luck so far.

3

This is hard, I’m following this too…

One way that worked for me for the content was disabling ionics JS-scrolling by setting:

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

That way the side-menus came out nicely, but it only works, because i dont need the JS scroll events from the page elsewhere.

But I wonder how that could work in lists… Does it inherit? I haven’t tried it, since I’m currently not on my dev machine

1 Like
4

Can you please put together a simple codepen of what you are trying to do?
I’m not sure I follow?

5

Hi mhartington,

I’m talking about the swipe to delete feature available in ion-list, (for example in https://github.com/driftyco/ionic-starter-tabs ).
While swiping right to left on an ion-item, the whole list is scrolling vertically (a little bit).
In a native implementation only the swipe to delete button would appear and the list wouldn’t scroll at all.

This codepen also shows that behavior: http://codepen.io/ionic/pen/JsHjf by swiping you can bring up the edit and share buttons but it also scrolls the list if the swipe gesture is not 100% horizontal.

Best,
Andreas

1 Like
6

Yes, this is exactly my issue as well. Basically, a way to disable list (vertical) scrolling once the user starts dragging the delete button open, and re-enable it once the user stops dragging it. I started fiddling with the code in listView.js, but I’m not familiar enough with it yet.

7

The problem also appears when embedding an ion-slide-box in a scrollable page.

8

I’m experiencing this as well since switching to beta14. The issue wasn’t there or wasn’t as noticable before.

I need to allow the vertical scrolling on the slide box and the content below it so I’m looking for ways to either disable the vertical scroll when scrolling horizontally or at least make it a bit less sensitive to the vertical swipe gesture on those pages.

If anyone on the forum as encountered this and/or has a suggestion on how to approach, their input would be really appreciated.

9

In the ionic tabs template you can see this on the “chats” tab. If you left swipe a chat item, delete appears, but it looks hokey because it moves up and down with your finger while swiping.

Other iOS apps lock the vertical scrolling while this horizontal swipe is occurring. Would LOVE to if ionic behaved that way too.

1 Like
10

This appears to be part of another issue as well.

1 Like
11

I have found one way to do this is to enable overflow scroll on the content tag (add overflow-scroll="true"). Of course, when you do that, the slide behavior becomes much, much less responsive than before. So, the workaround is to modify the ionic.bundle.js to allow for a little bit of vertical movement on a swipe.

I left a comment on an issue on the GitHub repo, here.

Basically, you can change line 6879 to this:

else if (Math.abs(e.gesture.deltaY) < 4 && Math.abs(e.gesture.deltaX) > 2) {
12

thanks a lot, it seems to be fixed in the latest nightly! (However there seem to be some strange collection repeat issues in the nightly so I can’t use it yet, but good to know it’ll be fixed)

Best,
Andreas

13

Hello, I’m still having this same issue. I tried making a codepen to illustrate it but had some difficulty, so hopefully my explanation is enough. Basically, I have three ion-tabs, “Home,” “Events,” and “Notifications.” The “Events” tab consists of an ion-slide-box with three ion-slides. Everything works great, except that when swiping between the ion-slides, both vertical and horizontal motion is permitted, so the menu bar (which differs between slides) shows a visible discontinuity if the user scrolls vertically while swiping. If there’s any way to lock the motion to one direction for the slides, please let me know. I’m currently running version 1.3.10. Thanks in advance for any help you can provide!

Sunny

14

Update: Adding “has-bouncing=‘false’” to the ion-content tag mostly fixed the issue. There is still a slight amount of vertical movement allowed, but it’s minimal.

1 Like
15

Hello everyone,

I provided a (working) solution here: solution involving an angularjs directive and $ionicScrollDelegate service

Feedback is welcome…

16

Did you ever find how to solve this? This is plaguing my applications… Can’t use ion-option-button because I literally can’t swipe on anything in an ion-list