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 回答