Prevent vertical scrolling while touch swiping

[chrishutchinson]

Hey,

I've implemented Siema and have got it working how I want, but while swiping on mobile, the page slides up and down at the same time as the gallery moving left (or right).

It'd be great to be able to lock down the vertical scrolling while horizontal movement is happening. I've had a play around and can't yet find a reliable mechanism for doing this, any suggestions?

Thanks a lot!

[RenanOliv]

I did some research and found a document about issues with touch events. There is a particular topic talking about this behaviour:

If custom side-pan behavior can be implemented in JavaScript without affecting threaded vertical scrolling of the content by setting 'touch-action: pan-y' on the div. Then any horizontal panning will generate events, but vertical panning won't be blocked on javascript ('pointercancel' will be dispatched as soon as scrolling starts).

So quicky solution would be adding a this.selector.style['touchAction'] = 'pan-y' in the init() function. Then would be necessary to add a specific algorithm for Safari and older browsers, since they don't supports the pan-y attribute.

[pawelgrzybek]

Thanks for hint. I will look at this shortly guys.

Can you show me some other libraries that prevent vertical scrolling on swiping carousel items? To be honest with it is not something that has ever been a problem for me.

[RenanOliv]

I've tested the Hammer.JS library and it seems to prevent vertical scrolling in both Android and iOS.

Some information about the challenges of creating a touch-action polyfill can be found in the Points.JS readme. And there is more details about the touch-action behaviour in the Google Developers Web Fundamentals docs.

There is also a blog post telling about the Chrome 56 decision to make touch listeners to passive by default. The challenge here is that new versions of Chrome are throwing error messages when using event.preventDefault() inside a touch listeners.

I've tried to do some experimentation with the source code but I was not able to achieve anything. And since event listeners are not my expertise I can't really promise a PR with a solution. But I hope these links above can be of use somehow.

[chrishutchinson]

I have been able to get a working solution in a local fork, I can post a summary of it in a few days time (not currently in a position to grab the code and share it). In a nutshell it was a small algorithm to help predict / guess the direction the user is swiping / scrolling in, and lock as appropriate.

In addition, it might be worth looking at React Swipeable Views, as I know that library supports this behaviour.

[pawelgrzybek]

I will have a deeper look into it at some point this weekend. Version 1.4.0 is nearly there and I will do my best to take some action about this issue guys. Thanks again!

[pawelgrzybek]

Hi guys. I did my research and spent some time to investigate this issue.

In my personal opinion accidental page scrolling by few pixels up or down when the carousel is scrolled is not that much of an issue. Vertical page scrolling is something natural and it doesn't break overall website user experience. Much worst is accidental carousel scrolling when we intent to scroll the page up or down. Unexpected horizontal scrolling when we don't want to breaks good UX. Do you agree with me?

I found a very elegant way to detect the scrolling orientation. Whenever user scrolls Siema up or down, there is no way to interact with carousel. Whenever user scrolls horizontally, carousel swipes but vertical scrolling of a page is not prevented as the library takes an advantage of passive events (unable to call preventDefault() on them).

Another solution is to use preventDefault() and remove passive events but as correctly pointed out by @RenanOliv it may cause some issue for Android users. I'm not able to test it on real device between Monday.

Have a look at:

1. current implementation
2. my suggested solution (fair compromise)
3. solution without passive events (needs android testing)

http://s.codepen.io/pawelgrzybek/debug/WpqKNa

What are your thoughts?

[RenanOliv]

Hi @pawelgrzybek, I do find both options reasonable solutions. I had no problem using it on the iOS Safari 10.2 (iPhone 5S) and Chrome 57 (Nexus 4) 👍

Unfortunately, I don't have any paper regarding usability problems of this kind. What I can complement is that this behaviour may increase the interaction cost for having a more unpredictable pattern than what some users are used to.

What I mean by this is that both Android and iOS have fixed vertical scrolling when touch swiping horizontally. What I found when testing with the systems is that when you start swiping you can't do anything else besides moving the object you are touching to either left or right.

I personally don't mind about the accidental vertical scrolling when swiping the carousel. But in my opinion, using the second option would fix @chrishutchinson issue.

[pawelgrzybek]

Thanks a lot for sharing your opinion and testing @RenanOliv. Hopefully my solution presented on second example on Codepen link will satisfy @chrishutchinson and other users. The solution is ready and going to be merged with master branch this week (and tons of other cool stuff that I was working on for a while).

Thanks a ton again you all!

[whatisjasongoldstein]

I'm still experiencing vertical scrolling and swiping at the same time (iPhone 6 and 6S, iOS 10). Is this supposed to be fixed?

Thanks!

[pawelgrzybek]

This is a desired behaviour. It will change with 1.5 tho and will work as you expect. It is not a bug at all — more like a personal preference.

[leahprin]

Thought I would add my 2 cents here - preventing vertical scrolling I think would be desired pattern, considering that's the expected behaviour on most horizontal sliders. It's especially apparent if the slider is small - noticed a few users having to scroll either up/down to get the full slider back into the viewport.

So, that's a +1 from me.

[baecher]

Hello @pawelgrzybek,

We've tested the current implementation in master on a number of devices. I noticed that the behavior between Safari 9 and Safari >=10 is very different. There is zero vertical scrolling during swiping on 9 (and Chrome, FWIW) but noticeable scrolling on >=10. I just wanted to quickly clarify if this is indeed the desired behavior? Also, is this what is going to be released with 1.5?

Thanks!

[Volodymyrkohut]

 
.owl-carousel (your class of carousel){
-ms-touch-action: pan-y;
touch-action: pan-y;
}

[pawelgrzybek]

nice tip @Volodymyrkohut !

[SanjiMika]

@Volodymyrkohut It works well in Android mobile but iOS, it doesn't.
I would like to show my solution for iOS

// Disable scrolling.
element.ontouchmove = function (e) {
e.preventDefault();
}

// Enable scrolling.
document.ontouchmove = function (e) {
return true; // Not use e.preventDefault()
}

I hope it will help everyone @whatisjasongoldstein @baecher.

[macitsamet]

I want to share the solution that works for me. The above solution did not work on ios. In fact, scrolling activity cannot be canceled unfortunately. So the event we're canceling is not a scrolling or vertical scrolling event. All events
I am sorry for my English. I do not know english.

function stop(e){
e=e || event;
e.preventDefault;
}
stop(); //-->Yes, we will use it ..

For example, where you will use;

function move(event){

var finish=event.touches[0].clientX;
var verticalFinish=event.touches[0].clientY;
var diff=finish-strt;
var verticalDiff=verticalStrt-verticalFinish;
var f;

if(diff<0 && (Math.abs(diff)>Math.abs(verticalDiff)/3)){
    f=verticalDiff+widthOffset;
slayt[x].style.left=diff+"px";
slayt[x].style.transition="none";
slayt[y].style.left=f+"px";
slayt[y].style.transition="none";

  stop(); //-->we used it here :)

  } 

else if(diff>0 && (Math.abs(diff)>Math.abs(verticalDiff)/3)){
    f=diff-widthOffset;
slayt[x].style.left=diff+"px";
slayt[x].style.transition="none";
slayt[z].style.left=f+"px";
slayt[z].style.transition="none";

  stop(); //-->we used it here :)

    }
 }

but there is a small problem. cancels if there is another function related to scrolling. return true; it does not work. I also write twice if I have a function related to the slider inside and outside the touchend.

function end(event){
//"touchend" related codes...
//bla bla
window.onscroll=function(){m=window.pageYOffset;if(m>=850) 
{buton.style.display="block";}else{buton.style.display="none";}}
}

If it is useful, I will be happy...

[NoelAbrahams]

I don't actually use Siema, but this issue is near the top on Google for people searching for ways to prevent vertical scrolling during swipe. I've spent a few hours on this, and I've managed to get close, but the solution is not perfect, so hoping others may pitch in.

Previous Solutions

CSS solution

.mycarousel {
  touch-action: pan-y;
}

The CSS solution doesn't work in iOS. It really shouldn't work in any case because what pan-y is saying is 'Disable all touch actions except pan-y'. But that's the one we are trying to prevent (i.e. vertical scrolling).

New Solution

 // This is the element on which the carousel is bound - assume it comes from somewhere
let element;

const timeTakenToReadASlideMS = 3000;
let touchStartX = 0;
let touchEndX = 0;
let touchAction = element.style.touchAction; // Save current value for resetting
let resetId;

element.addEventListener('touchstart', event => {

    const touch = event.changedTouches[0];
    touchStartX = touch.screenX;
});

element.addEventListener('touchmove', event => {

    const touch = event.changedTouches[0];
    touchEndX = touch.screenX;

    const swipeDistanceHorizontal = touchEndX - touchStartX;

    // Prevent vertical scrolling if a horizontal swipe is in progress
    if (Math.abs(swipeDistanceHorizontal) > 5) {

        // Prevent all touch actions except zooming
        element.style.touchAction = 'pinch-zoom';

        // Re-enable scrolling after the configured period
        clearTimeout(resetId); // Sliding window
        resetId = setTimeout(() => element.style.touchAction = touchAction, timeTakenToReadASlideMS);
    }
    else {

        // Re-enable scrolling if not a horizontal swipe
        element.style.touchAction = touchAction;
    }
});

element.addEventListener('touchend', nativeEvent => {

    // Handle touch end and transition to the next slide (not shown)
});

Problems with 'New Solution'

The solution depends entirely on the 3000MS setting. If the user spends longer than 3000MS on a slide then vertical scrolling is enabled again and we're back to square one.

Second problem: If they finish viewing it under 3000 MS and want to scroll down, they have a problem: the vertical scroll will not work at the first touch—although it will work on the second attempt.

In practice, this seems to be the best out of all the worst cases I've found elsewhere on the internet.

Anyone else can suggest an improvement?

[pawelgrzybek]

I really appreciate your input. For me there is one issue in this whole drama — carousels. It sounds a bit strange from a creator a carousel library, but after few years I consider Siema and all the other carousel libs as an anti-pattern. I am more than happy to meet for a beer and elaborate on this one.

[NoelAbrahams]

@pawelgrzybek will definitely catch up for a beer next time I'm in Leicester.

The carousel/slide-show can be misused, but it does have a place in design. Specifically, the carousel should only be used when the items off the main slide (ie the 2nd and subsequent slides) are non-essential, ie it doesn't matter if the user fails to view them.

We have exactly that use-case. If you look at this page on Impressionism on The Cultural Me, what we'd like to do is to implement a carousel here so that the user can view other impressionist paintings. This will enhance their understanding of impressionism, but it's non-essential.

Regarding the problem discussed in this issue, a carousel that even slightly scrolls vertically while the user is trying to slide right is unnerving. Some well-known implementations, namely the one on Instagram, is rock solid when swiping.

[joanna-s]

This might be mis-use of the commenting system on GitHub, I rarely have much to contribute but I wanted to say thank you for the enlightening discussion.

@pawelgrzybek, I remember your arguments against carousels when we worked in Rugby and largely I do agree but overall I'm with @NoelAbrahams on the topic.

I keep coming across you Pawel on my JS travels and I find your explanations on JS, amongst other things, to be one of the best, thank you :)