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

Question

我正在使用SwipeTouch plugin隐藏并通过滑动显示#child元素。

我有#parent元素，其中包含#child元素。

此#child并不总是有足够的内容来创建滚动条，但是当存在#parent约束#child元素时会出现问题，如果#child强制滚动条元素高于#parent

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

---

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

• 点按显示 #child元素将被称为 swipeIN 。
• 滑动到隐藏 #child元素将被称为 swipeOUT 。

... 问题是，如果滚动条存在且#child可见，我无法垂直滚动，因为这会注册为滑动尝试并触发{ {1}}。

所以，我有一个计划：

• 无滚动条：向所有方向滑动即可触发swipeOUT和swipeIN。
• 滚动条：向所有方向滑动以触发swipeOUT。向上或向下“向上滑动”滚动，向左或向右滑动以触发swipeIN。

这是一个很好的计划，除了它不起作用。我想如果我能够禁用滑动顶部并暂时向下滑动，它会起作用......

Link to my attempt（问题仅在触控设备上显而易见）。

Link that is better for testing in a touch device

有关如何使其发挥作用的任何想法？

Answer 1

将选项'allowPageScroll'从'auto'（默认）设置为'vertical'（在某些情况下，如果你想要）应该可以做到这一点

Answer 2

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

他更新了插件，以便您现在可以动态更改所有插件选项。这也使我想要的行为。可以找到here的文档（该方法称为：option）。

http://jsfiddle.net/lollero/yATmM/

http://jsfiddle.net/lollero/yATmM/show

我的代码：

$(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 );

                }

            }

        });

    });

});