5

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.

4

1 に答える 1

3

私は同じ問題を抱えていて、FlexSlider GitHub から潜在的な解決策を見つけました: https://github.com/woothemes/FlexSlider/issues/530

そのアドバイスを受けてtouchmove、ユーザーがスクロールしていないときにリスナーを削除することで、なんとか機能させることができました。

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

したがって、onTouchMove()クラスは次のようになります。

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);
    }
}
于 2013-09-18T16:24:39.133 に答える