Javascript 暂时允许使用TouchWipe插件垂直滚动

我使用滑动来隐藏和显示

#child

元素

我有

#parent

元素，它包含

#child

元素

这个

#child

并不总是有足够的内容来创建滚动条，但是如果有，问题就会出现。

#parent

约束

#child

元素，如果

#child

元素高于

#parent

<div id="parent">
    <div id="child">
         <!-- Lots of content -->
    </div>
</div>​

​

---

我想允许在任何方向滑动以显示和隐藏

#子对象

• 滑动到show

  #child

  元素将被称为

  swipeIN

• 滑动到隐藏

  #子
  元素将被称为
  swipeOUT

…问题是，如果存在滚动条并且可以看到

#子项

，我无法垂直滚动，因为这将注册为刷卡尝试并触发

刷卡输出

所以，我有一个计划：

• 无滚动条：向所有方向滑动可触发

  swipeIN

  和

  swipeOUT

• 滚动条：滑动所有方向以触发

  swipeIN

  '向上或向下滑动可滚动，向左或向右滑动可触发

  swipeOUT

这是一个很好的计划，只是行不通。我想如果我能暂时禁用上下滑动，它会工作的

（该问题仅在触摸设备上明显存在）

---

我有什么想法可以让它发挥作用吗？

我开始考虑我自己项目的长期计划，不久前我终于通过（链接github问题页面）联系了插件的开发人员

他更新了插件，这样你就可以随时更改所有插件选项。这也支持了我想要的行为。可以找到这方面的文档（该方法称为：

option

）

我的代码：

$(function() {      

    $(".parent").each(function() {

        var obj = $(this),
            objD = obj.data(),
            objChild = obj.find('.child'),
            scrollbars = obj.height() < objChild.height();

        obj
        .data({ "swipe": "in" })
        .swipe({

            fallbackToMouseEvents: true,
            swipe:function( event, direction ) {

                // swipeIN = swipe that shows #child 
                // ( Swiping is allowed for all directions ).
                if ( objD.swipe === 'in' ) {

                    obj.data({ "swipe": "out" });
                    objChild.show();

                    // If scrollbar exists, set allowPageScroll data 
                    // to 'vertical', so that next time when you swipe 
                    // up or down, you can scroll vertically.
                    scrollbars && obj.swipe('option', 'allowPageScroll', 'vertical');

                }
                // swipeOUT = swipe that hides#child 
                // If scrollbars don't exist, swipe at any direction to hide.
                // If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ).
                else if ( 
                    objD.swipe === 'out' && scrollbars && ( direction === 'left' || direction === 'right' )  || 
                    objD.swipe === 'out' && !scrollbars
                ) {

                    obj.data({ "swipe": "in" });
                    objChild.hide();

                    // If scrollbar exists, set allowPageScroll data to
                    // false, so that next time when you swipe up or down,
                    // you actually trigger a swipe.
                    scrollbars && obj.swipe('option', 'allowPageScroll', false );

                }

            }

        });

    });

});

$（函数（）{
$（“.parent”）。每个（函数（）{
var obj=$（此），
objD=obj.data（），
objChild=obj.find（'.child'），
滚动条=对象高度（）；
obj
.data（{“滑动”：“在”}）
.刷卡({
FallbacktoUseEvents:true，
滑动：功能（事件、方向）{
//swipeIN=显示#child的滑动
//（所有方向都允许刷卡）。
如果（objD.swipe=='in'）{
对象数据（{“刷卡”：“输出”}）；
objChild.show（）；
//如果存在滚动条，请设置allowPageScroll数据
//到“垂直”，以便下次刷卡时
//向上或向下，您可以垂直滚动。
滚动条和对象滑动（'option'，'allowPageScroll'，'vertical'）；
}
//swipeOUT=隐藏子对象的滑动
//如果滚动条不存在，则向任意方向滑动以隐藏。
//如果滚动条退出，则向左或向右滑动以隐藏（向上和向下为滚动保留）。
若否（
objD.swipe=='out'&&滚动条&&（方向=='left'| |方向=='right'）| |
objD.swipe=='out'&&！滚动条
) {
对象数据（{“滑动”：“在”}）；
objChild.hide（）；
//如果存在滚动条，请将allowPageScroll数据设置为
//错误，所以下次你上下滑动时，
//你真的触发了一次重击。
滚动条和对象滑动（'option'，'allowPageScroll'，false）；
}
}
});
});
});

将“allowPageScroll”选项从“自动”（默认）设置为“垂直”（在某些情况下，如果您愿意的话）应该可以做到这一点