Touch Action

vel-src: interactivity.css

Utilities for controlling how an element responds to touch input on mobile devices.

Class	Properties
vel-touch-auto	touch-action: auto
vel-touch-none	touch-action: none
vel-touch-pan-x	touch-action: pan-x
vel-touch-pan-y	touch-action: pan-y
vel-touch-manipulation	touch-action: manipulation

Examples

Disable touch scrolling on a map or canvas element

Touch events disabled (map / canvas area)

example.html

<div class="vel-touch-none" style="width:100%;height:10rem;background:#060b17;border:1px solid #1e2d45;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;color:#64748b">
  Touch events disabled (map / canvas area)
</div>

Allow only vertical panning (e.g. in a horizontal slider)

Scrollable content

Only vertical pan allowed on touch devices.

Horizontal touch gestures are passed through to the parent.

example.html

<div class="vel-touch-pan-y" style="overflow-y:auto;height:8rem;padding:1rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;color:#94a3b8">
  <p>Scrollable content</p>
  <p>Only vertical pan allowed on touch devices.</p>
  <p>Horizontal touch gestures are passed through to the parent.</p>
</div>