垂直滚动时禁用FlexSlider交互

Question

我正在使用FlexSlider jQuery插件。当用户开始在触摸设备上垂直滚动页面时，我想禁用与滑块的任何交互，特别是当用户在滑块上开始触摸并垂直滑动时。我怎么能这么做？

到目前为止，我已经尝试过：

1. 当用户在滑块上水平滑动时，禁用页面的垂直滚动：jQuery(document).on('touchmove', function(event_) { event_.preventDefault(); }) => works
2. 使用if (_scrollTop !== jQuery(window).scrollTop())方法=> works检测垂直滚动
3. 在滑块上方放置一层以防止滑块垂直滚动时任何进一步的触摸事件：jQuery('#flexslider-touch-blocker').show().focus() =>不工作

层方法(步骤3)从一开始就具有display: block时工作，因此触摸事件直接触发并被阻塞层捕获。但是，如果用户已经在滚动页面，而我在用户指尖下方解除阻塞层，那么触摸事件显然不会到达该层。为什么？注:我给出了一个额外的互联网点，回答了为什么？？问题的一部分:D

在垂直滚动时，还有其他方法来禁用FlexSlider交互吗？也许在插件上使用纯css，或者使用overflow: hidden;或其他什么？

请不要建议使用另一个插件或自己创建一个，因为我正在广泛使用FlexSlider功能。

更新：

作为临时解决方案，我编辑了插件的源代码：

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

不管怎样，如果你能想出一个更好的主意，那就太好了。

Answer 1

我遇到了同样的问题，并从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);
    }
}