Side Menu and vertical scroll

ionic-v1
1

Hi,
I’m using the side menu controller in my app, and while it works very well in almost every situation, its behavior while the user is scrolling vertically is not the best. Even a small horizontal swipe will start to show the side panel, which can be annoying if said horizontal swipe is performed as a part of a longer vertical swipe. A common use case to better illustrate the undesired behavior is scrolling a long list(view): it’s very unlikely to produce a perfectly vertical swipe, and even a small horizontal movement starts opening the side menu (I hope the situation is clear enough, I’m not a native English speaker so…feel free to ask for clarifications, I guess). It would be nice to ignore horizontal movements if a vertical one is in progress, to avoid this behaviour.

I’m using the Low-level APIs of the side menu controller (I’m using Cordova, and Durandal instead of Angular). I don’t know if this problem is related to Ionic or if I should deal with it in a different way, so any kind of help is welcome.

Thank you in advance.

2 Likes
2

I’m seeing this problem too.

I’ve got the standard out of the box side menu and I also find that vertical scrolling can be hampered by the side menu drag detection. Sometimes it halts scrolling because it thinks you want to open the side menu. A flick to scroll seems to work best. Drag to scroll seems to highlight the issue.

I’d suggest Ionic should dynamically turn off the side menu drag to open functionality whilst scroll is in effect…?

3

You can disable the drag-handler of a sidemenu by setting

dragContent=false

either with the Lowlevel-API:

<pane side-menu-content nav-router drag-content="false">

or with the controller:

$scope.dragContent = false;

See: How to disable drag in side menu

4

I don’t want to just disable the drag handler, I want it to be disabled while a vertical scroll is in progress. That API call doesn’t allow me to do so, if I’m not missing something very obvious.

5

Bump. Any news on this issue?

Thank you!

6

I have the same problem when using side menu. Here is my temporarily solution:

I create a directive to do what side-menu-content do now. And use css to set the position and size of that directive.

That is, the side menu open only when I swipe on that directive.

7

Another related thing that I find annoying is the content in the side menu can scroll horizontally if you are not careful to scroll perfectly vertically with your finger. I wish there was a way to “lock” scrolling in the side menu so it is always vertical only

1 Like
8

Hi pmarchezz, can you please guide or share me the sample code for ionic framework with Durandal. I appreciate your help. thank you.

-SK