Press/to search

Interactivity

Touch Action v1.1.1

Utilities for set control over the effect of touchscreen interactions to an element.

Class

classcss
touch-autotouch-action: auto
touch-nonetouch-action: none
touch-pan-xtouch-action: pan-x
touch-pan-lefttouch-action: pan-left
touch-pan-righttouch-action: pan-right
touch-pan-ytouch-action: pan-y
touch-pan-uptouch-action: pan-up
touch-pan-downtouch-action: pan-down
touch-pinch-zoomtouch-action: pinch-zoom
touch-manipulationtouch-action: manipulation
Note: Your browser does not currently support the utilities.

Usage

Set an element with touch limit to pan-left, no pan-right is allowed.

<!-- Example -->
<y class="touch-pan-left ... overflow-scroll overscroll-contain">
  ...
</y>

Set an element with touch limit to pan-none, x and y panning is disabled.

<!-- Example -->
<y class="touch-none ... overflow-scroll overscroll-contain">
  ...
</y>

Set an element with full touch manipulation, x and y panning is enabled.

<!-- Example -->
<y class="touch-manipulation ... overflow-scroll overscroll-contain">
  ...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.