javascript - 垂直滚动时禁用 FlexSlider 交互

Question

我正在使用 FlexSlider jQuery plugin .当用户开始在触摸设备上垂直滚动页面时，我想禁用与 slider 的任何交互，尤其是当用户开始触摸 slider 并垂直滑动时。我该怎么做？

到目前为止我尝试了什么:

1. 当用户在 slider 上水平滑动时禁用页面的垂直滚动:jQuery(document).on('touchmove', function(event_) { event_.preventDefault(); }) => 有效

2. 使用 if (_scrollTop !== jQuery(window).scrollTop()) 方法检测垂直滚动 => 有效

   /li>
3. 在 slider 上方放置一个层以防止在垂直滚动时 slider 上发生任何进一步的触摸事件:jQuery('#flexslider-touch-blocker').show().focus() => 不起作用

层方法(第 3 步)在它从一开始就有 display:block 时起作用，因此触摸事件直接被触发并被阻塞层捕获。但是，如果用户已经在滚动页面并且我取消隐藏用户指尖正下方的阻挡层，则触摸事件显然不会到达该层。为什么？注意:我给了一个 bonus internet point 来回答这个问题的部分原因 :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);
    }
}