javascript - Temporarily allow scrolling vertically with TouchSwipe plugin - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm using SwipeTouch plugin to hide and show #child element by swiping.

I have #parent element that holds the #child element.

This #child will not always have enough content to create scrollbar, but the problem will arise when there is.The #parent constrains #child element, forcing a scrollbar if #child element is taller than the #parent

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

---

I'd like to allow swiping at any direction to show and hide the #child...

• Swiping to show #child element will be referred to as swipeIN.
• Swiping to hide #child element will be referred to as swipeOUT.

...problem with that is, if and when the scrollbars exist and the #child is visible, I can't scroll vertically because that would register as swiping attempt and trigger swipeOUT.

So, I had a plan:

• No scrollbar: swipe at all directions to trigger swipeIN and swipeOUT.
• Scrollbars: Swipe all directions to trigger swipeIN. 'Swipe' up or down to scroll, swipe left or right to trigger swipeOUT.

This was a good plan, except that it doesn't work. I guess if I was able to disable swipe top and swipe down temporarily, it would work...

Link to my attempt ( the problem is only apparent on a touch device ).

Link that is better for testing in a touch device

Any ideas on how I could get this to work?

I'm using SwipeTouch plugin to hide and show #child element by swiping.

I have #parent element that holds the #child element.

This #child will not always have enough content to create scrollbar, but the problem will arise when there is.The #parent constrains #child element, forcing a scrollbar if #child element is taller than the #parent

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

---

I'd like to allow swiping at any direction to show and hide the #child...

• Swiping to show #child element will be referred to as swipeIN.
• Swiping to hide #child element will be referred to as swipeOUT.

...problem with that is, if and when the scrollbars exist and the #child is visible, I can't scroll vertically because that would register as swiping attempt and trigger swipeOUT.

So, I had a plan:

• No scrollbar: swipe at all directions to trigger swipeIN and swipeOUT.
• Scrollbars: Swipe all directions to trigger swipeIN. 'Swipe' up or down to scroll, swipe left or right to trigger swipeOUT.

This was a good plan, except that it doesn't work. I guess if I was able to disable swipe top and swipe down temporarily, it would work...

Link to my attempt ( the problem is only apparent on a touch device ).

Link that is better for testing in a touch device

Any ideas on how I could get this to work?

• javascript
• jquery
• touch
• swipe

Share Improve this question Follow edited Oct 22, 2012 at 19:58 munity wiki
13 revs
Joonas 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Setting the option 'allowPageScroll' from 'auto' (default) to 'vertical' (in some cases if you want) should do the trick

I started thinking about the long term plan of my own project and some time ago finally got myself to contact the developer of the plugin via github( Link the github issue page ).

He updated the plugin so that you can now change all plugin options on the fly. That also enables the behavior I was looking for. The documentation for this can be found here ( The method is called: option ).

http://jsfiddle/lollero/yATmM/

http://jsfiddle/lollero/yATmM/show

My Code:

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

                }

            }

        });

    });

});

本文标签： javascriptTemporarily allow scrolling vertically with TouchSwipe pluginStack Overflow