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

【问题标题】：Temporarily allow scrolling vertically with TouchSwipe plugin暂时允许使用 TouchSwipe 插件垂直滚动
【发布时间】：2012-10-22 08:26:00
【问题描述】：

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

我有包含#child 元素的#parent 元素。

这个#child 并不总是有足够的内容来创建滚动条，但是当有内容时就会出现问题。#parent 约束#child 元素，如果#child 元素比@987654332 高，则强制滚动条@

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

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

滑动到 show #child 元素将被称为 swipeIN。
滑动到隐藏#child元素将被称为swipeOUT。

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

所以，我有一个计划：

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

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

Link to my attempt（问题仅在触摸设备上很明显）。

Link that is better for testing in a touch device

关于如何让它发挥作用的任何想法？

【问题讨论】：

标签： javascript jquery touch swipe

【解决方案1】：

将选项“allowPageScroll”从“auto”（默认）设置为“vertical”（在某些情况下，如果您愿意）应该可以解决问题

【讨论】：

【解决方案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 );

                }

            }

        });

    });

});

【讨论】：