Gesture issues

[manucorporat]

There are several issues related with events listeners and collision of gestures in Ionic 2 that should be fixed in order to provide the best UX experience closest to a native app.

At first, I am going to enumerate them, and then propose several solutions to each one. I think we should always try to fix it using native JS/CSS apis whenever it's possible.

Preventing scrolling in ion-content

It is desired to block scrolling when the following gestures are recognised:

• Swipe to show the menu
• Swipe to go back ( While swiping to go back, vertical scrolling possible #7120 )
• Sliding an item
• Range

Gesture collision

• Among Slides, Swipe to go back, Swipe to show menu, Sliding items and Range
• Between Refresh and Swipe Menu ( Refresher conflicts with Menu #7011 )
• Between two menus ( Menu swiping mess (push and reveal only) #6826 )

Performance

We should try to avoid fullscreen touchmove/mousemove listeners that can prevent optimus scrolling performance.

• Swipe from edges
• Sliding items

#7049

Future

• 300ms delay hacks are not longer needed (WKWebView)
• Touch-Action (WKWebView)
• Passive event listeners

Solutions

Scrolling

To prevent scrolling is required to call preventDefault() on touchstart, mousedown or first scroll event, this is not always possible since several touchmove/mousemove events are required before a panx can be recognised:

• Newest CSS properties like touch-action can help in Range, blocking scrolling only when the user is in fact dragging the range.
• Extend the approach used by ion-backdrop to block scrolling.

https://github.com/driftyco/ionic/blob/a1a582b7a10e641e6f2e1dd0f2937c85db82394d/src/components/backdrop/backdrop.ts#L21-L23

ScrollManager: #7066

Gesture collision

Same problem, swipe gestures need several events in order to be detected.
#6726

[manucorporat]

#7120

[paulogr]

Following!

[manucorporat]

@danbucholtz #7066

[danbucholtz]

I closed #7066. I am imagining an implementation like this:

As a developer, I would like to ability to freeze/prevent scrolling of a particular scroll view, or even the entire app. The use case would be something like drag and drop, or even when swiping open an ion-item.

The ideal implementation allows a "ScrollDelegate" or something similar instance to be injected into component that lets the user call operations on it.

class ScrollDelegate{
   constructor(){
   }

   freezeAllScrolls(){
   }

   freezeScrollView(scrollViewIdentifier:string){
   }
}

I am imagining an API that looks like this.

Thanks,
Dan