Tutorial: Page scrolling

Page scrolling

touchSwipe Fork me on GitHub

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.


			

			

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.
Swipe me


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.
Swipe me


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


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.
Swipe me


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.
Swipe me


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