Disable FlexSlider interactions when scrolling vertically

Question

I'm using the FlexSlider jQuery plugin. I'd like to disable any interactions with the slider when the user starts to scroll the page vertically on a touch device, especially when the user starts the touch on the slider and swipes vertically. How can I do that?

What I have tried so far:

1. Disable vertical scrolling of the page, when the user swipes horizontally on the slider: jQuery(document).on('touchmove', function(event_) { event_.preventDefault(); }) => works

2. Detect vertical scrolling by using the if (_scrollTop !== jQuery(window).scrollTop()) method => works

3. Put a layer above the slider to prevent any further touch events on the slider when scrolling vertically: jQuery('#flexslider-touch-blocker').show().focus() => doesn't work

The layer method (step 3) works when it has display: block right from the beginning, so that the touch event is triggered directly on and is being captured by the blocking layer. However the touch events obviously do not arrive on the layer if the user is already scrolling the page and I unhide the blocking layer right below the finger tip of the user. Why? Note: I give a bonus internet point for answering this why-part of the question :D

Any other method to disable FlexSlider interactions when scrolling vertically? Maybe using pure css on the plugin, maybe using overflow: hidden; or something else?

Please do not suggest to use another plugin or to create one myself, since I am using the FlexSlider features extensively.

---

UPDATE:

As a temporary solution I edited the source code of the plugin:

function onTouchMove(e) {
    // START OF LIB EXTRANEOUS CODE
    if (jQuery(this).hasClass('disabled')) { return; }
    // END OF LIB EXTRANEOUS CODE

Anyway it would be great if you'd come up with a better idea.

Answer 1

I was having the same problem, and found a potential solution from the FlexSlider GitHub: https://github.com/woothemes/FlexSlider/issues/530

Taking that advice, I managed to get it working by removing the touchmove listener when the user is not scrolling:

el.removeEventListener('touchmove', onTouchMove, false);

So the onTouchMove() class now looks like this:

function onTouchMove(e) {
    dx = (vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX;
    scrolling = (vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY));
    if (!scrolling || Number(new Date()) - startT > 500) {
        e.preventDefault();
        if (!fade && slider.transitions) {
            if (!vars.animationLoop) {
                dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
            }
            slider.setProps(offset + dx, "setTouch");
        }
    } else {
        el.removeEventListener('touchmove', onTouchMove, false);
    }
}