feat(swipe): support scroll and swipe detection for an element on the same axis

[totomaze]

Bug:

When using md-swipe on an element that can scroll the scrolling is impossible in a mobile device (touch)

CodePen and steps to reproduce the issue:

https://codepen.io/anon/pen/XxWjEx which demonstrates the issue:

Impossible to scroll the swipeleft element when you are on a mobile device mode.

Detailed Reproduction Steps:

1. to scroll the swipeleft element when you are on a mobile device mode => impossible

What is the expected behavior?

The scrolling is still available and the swipe can also be detected.

What is the current behavior?

When you add md-swipe on an element this element will be impossible to scroll in a mobile device

What is the use-case or motivation for changing an existing behavior?

I need to scroll an element and also detect the swipe on a mobile device

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.9
• AngularJS Material: 1.1.10
• OS: windows 10
• Browsers: chrome

Ps: everything work fine on a desktop mode. Is there any work around for this problem ?

[Splaktar]

In the demo that I can see, you are wanting to support horizontal scrolling and swipe left on the same element?
We don't support that as we apply touch-action: pan-y for swipe left and swipe right. This enables swipe detection for pan-x events and scrolling for pan-y.
The opposite is true for swipe up and swipe down.

Here's an example of swipe left and vertical scrolling working together: https://codepen.io/Splaktar/pen/zmxjeL

Previous versions of AngularJS Material didn't support vertical scrolling w/ swipe left/right until that touch-action: pan-y was added sometime around 1.1.5.

If you can come up with a proposal on how we could support the detection of both swipe and scroll on the same element, in the same axis, please do let us know. We have an issue open for moving to hammerjs for gesture detection (which may or may not help), but it's unclear if we will ever be able to actually get that implemented and merged in.

[totomaze]

Hi , i tried hammerjs too but without success.
Yes I want to be able to scroll horizontally and also detect a swipe.
To make it work I used the following library :
http://labs.rampinteractive.co.uk/touchSwipe/docs

It only works if I set the preventDefaultEvent to false , so maybe md-swipe is preventing the default event (didn´t have time to look at angular code yet)

$(".swipe").swipe({
  // Generic swipe handler for all directions
  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
    console.log("swiped " + direction + " duration " + duration);
    if (duration < 250) {
      if (direction === "left") {
        $scope.nextDay(null, null, $scope.forecastVertical.days, $scope.forecastVertical.scope.allDays)
      } else if (direction === "right") {
        $scope.previousDay(null, null, $scope.forecastVertical.days, $scope.forecastVertical.scope.allDays)
      }
    }
  },
  preventDefaultEvents: false,
  threshold: 150
});

[Splaktar]

Glad to hear that you got this working! Thank you for the reference also. We'll have to look into what they are doing.