allowPageScroll "vertical" not working on iPhone 5S iOS 9.2 Safari

[nealmckinney]

tested after updating the code on my own site and then tested the demos here, not allowing vertical scroll where it should: http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html

[artur-thiessen]

Good point. The example does not work for me either (in terms of vertical scrolling). iPhone 6 & iPhone 6s

[artur-thiessen]

Was able to fix the issue using "preventDefaultEvents: false,"

[mattbryson]

Yeah, I thought that I had sorted this with the new currentDirection property, ill have another look now and see whats up

[toddsampson]

+1. Thanks for the recommended hack @artur-thiessen.

[ghost]

+1 still an issue. I had to update to get things working on windows phone, but now vertical page scrolling is broken with a horizontal slider.

[HugoHeneault]

Yeah still facing it... :sob:

[alxpereira]

@artur-thiessen was right. Was able to fix the issue using preventDefaultEvents: false on iOS9 (iPhone6 tested)

[ghost]

Unfortunately preventDefaultEvents: false is not a solution. It seems to work ok-ish on iOS, but when swiping horizontally on Android and Windows Phone the native "page forwards/backwards" gestures are invoked, instead of merely interacting with the slider. The same does happen on iOS, but iOS has a smaller tolerance for these gestures so they are less noticeable.

[alxpereira]

I had no issue for the moment on Android devices, even without that workaround. (tested on One+One)

[jdcrecur]

Yea, it breaks things for me too, on ios you cannot vertically scroll:

jQuery('.sliderContainer').swipe({
                swipeLeft: function( event, direction, distance, duration, fingerCount ){
                    if( slider.swipeInProgress === false ){
                        slider.swipeInProgress = true;
                        clearInterval(slider.interval);
                        slider.slideToNext();
                    }
                },
            });

[sanderaarts]

I have the same issue both on iOS 9.1 (iPhone 5c), iOS 8.1.3 (iPhone 6 Plus) and iOS 7.1.2 (iPhone 4).

[Djules]

Found a little workaround from @artur-thiessen's answer :

$('#test').swipe({
    swipeStatus: function(event, phase, direction, distance, duration, fingers, fingerData, currentDirection) {
        // replace 'right' with the direction for which you have NOT defined a swipe handler
        var preventDefaultEvents = direction === 'right';
        // prevent (or not) default swipe events on the fly
        $(this).swipe('option', 'preventDefaultEvents', preventDefaultEvents);
    }
});

It works for me on iOS 9.1 (iPad 4).

[prashen]

@Djules I have used your solution but it's not working in iphone smoothly.

[xtroll]

Hi, I seem to have a similar problem: My source looks like this:

[..]
$('#myCarousel').swipe({
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
        $(this).carousel('next');  
    },
    swipeRight:function(event, direction, distance, duration, fingerCount) {
        $(this).carousel('prev');  
    },
    threshold:0,
    allowPageScroll:"auto"
});
[..]

I want the image to be swiped left and right by touch-swiping and the whole page to scroll up and down by "normal" up-down-finger-swiping on the "#carousel"-image. Left and right works perfect, but up and down scrolling is blocked. What is wrong with my code? I'm testing with iPad Air and iPad 2. (On Android-devices everything works fine: The problem seems iOS-specific)

Many thanks for your advices!

[manospasj]

It appears to be affecting windows phone devices too. @artur-thiessen's solution fixed the issue for me.

[ghost]

I had a problem with horizontal scrolling elements and also Google Maps. I set "preventDefaultEvents: false". I made a scrolling class for elements I want to do a horizontal scroll on. You don't know which element the scroll will be triggered on, so I get the element that was swiped with $(e.srcElement), then I do a .closest() on it to find if it has my scrolling class. If it does, I don't do anything, if it doesn't then I call my swipe function. Not the prettiest solution, but it works.

[saturday1]

Hello! Having the same problem and trying how to implement "preventDefaultEvents" in my script:

if (shouldSwipe) {
            jQuery(".sy-wrapper li").swipe( {
                tap: function() {
                    var link = jQuery(this).find('a').attr('href');
                    if (link) window.location.href = link;
                },
                // Swipe left
                swipeLeft: function(){
                    jQuery(".sy-wrapper li a").click(function(event) {
                        event.preventDefault();
                    });
                    thumbs.goToPrevSlide();
                    // Check if paused - stay paused
                    if(jQuery('.sy-controls').hasClass('is-paused')){
                        setTimeout(function(){
                            thumbs.stopAuto();
                        }, transitionTime + addOnTime);
                    }
                },
                // Swipe right
                swipeRight: function(){
                    jQuery(".sy-wrapper li a").click(function(event) {
                        event.preventDefault();
                    });
                    thumbs.goToNextSlide();
                    // Check if paused - stay paused
                    if(jQuery('.sy-controls').hasClass('is-paused')){
                        setTimeout(function(){
                            thumbs.stopAuto();
                        }, transitionTime + addOnTime);
                    }
                }, 
                allowPageScroll:"vertical",
                excludedElements: ".noSwipe"
            });
        }

This is a slideshow and I have some different functions and timeouts to make it work. Would be very happy for help, since I do not get it where I should implement the fix in this.

Should I do it like this?

allowPageScroll:"vertical",
preventDefaultEvents: false,
excludedElements: ".noSwipe"

[prashen]

Hey Friends, This is working for me in ios. Vertical scrolling is working and on scrolling over anchor and image is also working.

This is my code swipeStatus: function(event, phase, direction, distance, duration, fingers, fingerData, currentDirection) { // replace 'right' with the direction for which you have NOT defined a swipe handler var preventDefaultEvents = direction === 'right'; // prevent (or not) default swipe events on the fly $(this).swipe('option', 'preventDefaultEvents', preventDefaultEvents); },

allowPageScroll: "vertical", //Default is 75px, set to 0 for demo so any distance triggers swipe threshold: 0, excludedElements: "label, button, input, select, textarea, .noSwipe" // important for mobile anchor element swipe up and down

In the swipe status function the above code is important to swipe up and down.

And the option "excludedElements" i have removed some elements for swiping over them in mobile. In the plugin there are options like this:

excludedElements: "label, button, input, select, textarea, a, .noSwipe"

I have removed the 'a' from the excludedElements option in my plugin and it's now working swipe over anchors.

[saturday1]

Hello!

I would be really grateful if someone could help me with this bug. It is getting quite frustrating. :( preventDefaultEvents: false does not work, it blocks all swipes for me. Anyone have a clue?

if (shouldSwipe) {
        jQuery(".sy-wrapper li").swipe( {
            tap: function() {
                var link = jQuery(this).find('a').attr('href');
                if (link) window.location.href = link;
            },
            // Swipe left
            swipeLeft: function(){
                jQuery(".sy-wrapper li a").click(function(event) {
                    event.preventDefault();
                });
                thumbs.goToPrevSlide();
                // Check if paused - stay paused
                if(jQuery('.sy-controls').hasClass('is-paused')){
                    setTimeout(function(){
                        thumbs.stopAuto();
                    }, transitionTime + addOnTime);
                }
            },
            // Swipe right
            swipeRight: function(){
                jQuery(".sy-wrapper li a").click(function(event) {
                    event.preventDefault();
                });
                thumbs.goToNextSlide();
                // Check if paused - stay paused
                if(jQuery('.sy-controls').hasClass('is-paused')){
                    setTimeout(function(){
                        thumbs.stopAuto();
                    }, transitionTime + addOnTime);
                }
            }, 
            allowPageScroll:"vertical",
            preventDefaultEvents: false,
            excludedElements: ".noSwipe"
        });
    }

[singcl]

nice, I also have the problem with iphone4S ios 9.2 .Now it solved,Thanks gays.

[SWBennett06]

I'm fully ready to blame Apple for this, but would really appreciate it were this issue resolved. The fixes above work inconsistently and often with negative side-effects. This issue was reported over a year ago--is there any plan to address it?

[KylinWu]

Hi @saturday1 , Try set allowPageScroll:"auto" and remove preventDefaultEvents: false. In my case, now scrolling and swiping are working in both desktop browsers and mobile browsers.

[saturday1]

Thanks. The problem I have is the following: I have a slideshow. They have links. When I swipe left/right I am changing slide and the links should not be fired.They do not fires, so it works as expected. When I swipe/scroll up and down, it should scroll and not fire the click on release, but it does right now. How do I stop the link to be fired when I hold my finger on the a element(The slide), scroll up/down and release. You can see how it works right now at https://dev3.axiell.com/web/arena on iPhone

[saturday1]

And @KylinWu thanks, but still I do not get it as I want to work. The link is firing on release when I scroll up and down.

[saturday1]

Just tried to add preventdefault to swipe up/down, but no success:

if (shouldSwipe) {
			jQuery(".sy-wrapper li").swipe( {
				tap: function() {
					var link = jQuery(this).find('a').attr('href');
					if (link) window.location.href = link;
				},
				// Swipe left
				swipeLeft: function(){
					jQuery(".sy-wrapper li a").click(function(event) {
						event.preventDefault();
					});
					thumbs.goToPrevSlide();
					// Check if paused - stay paused
					if(jQuery('.sy-controls').hasClass('is-paused')){
						setTimeout(function(){
							thumbs.stopAuto();
						}, transitionTime + addOnTime);
					}
				},
				// Swipe right
				swipeRight: function(){
					jQuery(".sy-wrapper li a").click(function(event) {
						event.preventDefault();
					});
					thumbs.goToNextSlide();
					// Check if paused - stay paused
					if(jQuery('.sy-controls').hasClass('is-paused')){
						setTimeout(function(){
							thumbs.stopAuto();
						}, transitionTime + addOnTime);
					}
				}, 
				// Swipe up
				swipeUp: function(){
					jQuery(".sy-wrapper li a").click(function(event) {
						event.preventDefault();
					});
				},
				// Swipe down
				swipeDown: function(){
					jQuery(".sy-wrapper li a").click(function(event) {
						event.preventDefault();
					});
				},
				allowPageScroll:"auto",
				excludedElements: ".noSwipe"
			});
		}