Help - Disabling scroll (scroll=false) on ion-content causes problems with swipe events


#1

When I set scroll= false (<ion-content has-header=“false” “scroll=false”> ) , it causes the on-swipe-left and on-swipe-right that is set on a div inside that page to become buggy and unresponsive. When ion-content scroll=false, the swipe events either do not fire or fire erratically after multiple swipes. When I remove the scroll attribute and let it default to true, the swipe events behave normally. I tested this problem on a android nexus 5.
I want the swipe-left and swipe-right to work without scroll bars on the page. Can someone help with this? If this is a known problem, are there any workarounds? Thanks in advance.


#2

The problem is that the swipe-events are javascript events. if you set scroll=“false” your app will use css-overflow scrolling (native behave of the webview).

Like described here you can set attributes to hide scrollbars :wink:
http://ionicframework.com/docs/api/directive/ionScroll/
and
http://ionicframework.com/docs/api/directive/ionContent/
scrollbar-x="false"
scrollbar-y=“false”


#3

Thanks ! scrollbar-y=‘false’ seemed to do the trick.I had to also adjust the margins to ensure the content did not actually scroll(scroll caused a vertical jitter when swiping left/right. Though I am not quite sure I understand why scroll=‘false’ would interfere with the javascript swipe events. Could you elaborate? Understanding this better could help avoid further issues in the future.


#4

ionic implemented an own scrolling in javascript. By default for ion-scroll and ion-content this is enabled.
If you set scroll=“false” -> ionic is out and the browsers are doing the scrolling (calculations, event-handling). But browsers can trigger the touch/scroll events at different times. Like safari on ios, if you have a bouncing effect and so on.

If you use javascript-ionic-scrolling. You can be sure that the events are working correctly on each device and browser.