[ @sdxc/u/general ]

touch-action

Applies touch-action.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { touchAction } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.touchAction()`	`css({ touchAction: "none" })`
`u.touchAction("manipulation")`	`css({ touchAction: "manipulation" })`

Examples

Basic example

Use touchAction(value) to choose which touch gestures the browser handles on an element, like touchAction("pan-x") for sideways panning only. On a touch screen, try panning each photo:

touchAction("auto")

touchAction("pan-x")

touchAction()

<div mix={[...]}>
	<div>
		<p mix={[...]}>touchAction("auto")</p>
		<div mix={[touchAction("auto"), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
	<div>
		<p mix={[...]}>touchAction("pan-x")</p>
		<div mix={[touchAction("pan-x"), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
	<div>
		<p mix={[...]}>touchAction()</p>
		<div mix={[touchAction(), overflow("auto"), is(40), bs(32), rounded("lg")]}>
			<div mix={[is(80), bs(64), ...]} />
		</div>
	</div>
</div>

Fast repeated taps

Use touchAction("manipulation") on controls people tap quickly, so a double tap counts twice instead of zooming the page:

<div mix={[hstack({ gap: 4, align: "center" })]}>
	<button aria-label="Remove one" mix={[touchAction("manipulation"), ...]}>
		−
	</button>
	<span mix={[tabularNums(), text("xl")]}>3</span>
	<button aria-label="Add one" mix={[touchAction("manipulation"), ...]}>
		+
	</button>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.touchAction())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.touchAction())

Signature

u.touchAction(value?: TouchActionValue)