Tutorial: Page scrolling

property: allowPageScroll

You can set how page scrolling is handled by the browser when the user is interacting with a touchSwipe object.
There are 4 possible settings for the allowPageScroll option. These can be strings, or use the plugin constants in $.fn.swipe.pageScroll

• auto or $.fn.swipe.pageScroll.AUTO
  scrolling will only occur if a user swipes in a direction for which you have NOT defined a swipe handler. E.g If only swipeLeft is defined, then a RIGHT, UP or DOWN swipe would cause the page to scroll.
• none or $.fn.swipe.pageScroll.NONE
  scrolling will never occur.
• horizontal or $.fn.swipe.pageScroll.HORIZONTAL
  horizontal swipes will cause the page to scroll.
• vertical or $.fn.swipe.pageScroll.VERTICAL
  vertical swipes will cause the page to scroll.

NOTE: if the general swipe or swipeStatus handlers are specificed, then allowPageScroll will be dissabled by default, as they detect swipes in all directions. To use scrolling AND the swipe handler, set allowPageScroll to the direction you want the user to be able to scroll.

Jump to Example

allowPageScroll = "auto" or $.fn.swipe.pageScroll.AUTO
Swipe Left or Right The swipe will trigger but the page will NOT scroll.
Swipe Up or Down The page will scroll as there is no up or down swipe handler.


allowPageScroll = "none" or $.fn.swipe.pageScroll.NONE
Swipe Left The swipe will trigger but the page will NOT scroll.
Swipe right, Up or Down No swipe handler is defined, so nothihng happens and the page will NOT scroll.


allowPageScroll = "horizontal" or $.fn.swipe.pageScroll.HORIZONTAL
Swipe left and right are triggered


allowPageScroll = "vertical" or $.fn.swipe.pageScroll.VERTICAL
With the general swipe or swipeStatus handlers
These enable all 4 directions, but here we have set allowPageScroll to "vertical" so the user can scroll up and down, and swipe left and right with the general swipe handler.

Note how the vertical swipe is hit and miss. As soon as the page starts scrolling, the user is no longer swiping across the object.

allowPageScroll = "horizontal" or $.fn.swipe.pageScroll.HORIZONTAL
Horizontal, but WITH the general swipe or swipeStatus handlers
These enable all 4 directions, but here we have set allowPageScroll to "horizontal" so the user can scroll up and down, and swipe left and right with the general swipe handler.


Pinch and allowPageScroll = "vertical" or $.fn.swipe.pageScroll.VERTICAL
Vertical, but WITH pinch handlers