Question

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

到目前为止我尝试过：

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

图层方法（步骤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);
    }
}

垂直滚动时禁用FlexSlider交互

1 个答案: