Interactivity

Touch Action

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
touch-auto	touch-action: auto
touch-none	touch-action: none
touch-pan-x	touch-action: pan-x
touch-pan-left	touch-action: pan-left
touch-pan-right	touch-action: pan-right
touch-pan-y	touch-action: pan-y
touch-pan-up	touch-action: pan-up
touch-pan-down	touch-action: pan-down
touch-pinch-zoom	touch-action: pinch-zoom
touch-manipulation	touch-action: manipulation

Usage

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

<div class="touch-pan-left ... overflow-scroll overscroll-contain">
  <div class="width-64 height-64">
    <img src="...">
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .touch-pan-left,
    .overflow-scroll,
    .overscroll-contain;
}
.dummy-child {
  @extend
    .width-64,
    .height-64;
}

SCSS

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

<div class="touch-none ... overflow-scroll overscroll-contain">
  <div class="width-64 height-64">
    <img src="...">
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .touch-none,
    .overflow-scroll,
    .overscroll-contain;
}
.dummy-child {
  @extend
    .width-64,
    .height-64;
}

SCSS

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

<div class="touch-manipulation ... overflow-scroll overscroll-contain">
  <div class="width-64 height-64">
    <img src="...">
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .touch-manipulation,
    .overflow-scroll,
    .overscroll-contain;
}
.dummy-child {
  @extend
    .width-64,
    .height-64;
}

SCSS