2

I have a parent element to which I applied ng-swipe-right and ng-swipe-left. The swipe functionality works well. One of the element's child element has some content that overflows hence scroll gets automatically applied to it. BUT now, this scroll has stopped working after I had applied the swipe functionality. When I remove the swipe, the scroll works.

Can you please advice, how I can have the parent element to have the swipe functionality but its child element which has overflowing content to also retain its scroll functionality.

NOTE: I've not used any plugin for applying scroll functionality, it automatically takes scroll.

Temp O'rary
  • 5,366
  • 13
  • 49
  • 109

1 Answers1

0

Your case requires both the scroll and swipe event to be available, which I couldn't figure out how to do. Also see this question: Cancel ng-swipe-right on child

If anyone else who doesn't need both events sees this: in my use case the user can either swipe or scroll, depending on whether they tapped a gallery image or not. So I could do the following:

<!-- Fit image to page -->
<div class="gallery-content fit-to-page" ng-if="vm.fitToPage"
     ng-swipe-right="vm.showPreviousSlide()" ng-swipe-left="vm.showNextSlide()">
  <img ng-src="{{vm.currentSlide.url}}" ng-click="vm.fitToPage = false" />
</div>

<!-- Natural image size -->
<div class="gallery-content natural-size" ng-if="!vm.fitToPage">
  <img ng-src="{{vm.currentSlide.url}}" ng-click="vm.fitToPage = true" />
</div>

So using the ng-swipe directives on the element I need swipe for, but not on the one I need to scroll.

Community
  • 1
  • 1
Vlad Sabev
  • 592
  • 1
  • 8
  • 22