暂时允许使用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可见，我无法垂直滚动，因为这将注册为滑动尝试并触发swipeOUT。

所以，我有一个计划：

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

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

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

                }

            }

        });

    });

});