互動
觸控操作touch-action
Setting how an element's region can be manipulated by a touchscreen user.
Overview
| Class | Declarations |
|---|---|
touch-action:auto | touch-action: auto;
|
touch-action:none | touch-action: none;
|
touch-action:pan-x | touch-action: pan-x;
|
touch-action:pan-left | touch-action: pan-left;
|
touch-action:pan-right | touch-action: pan-right;
|
touch-action:pan-y | touch-action: pan-y;
|
touch-action:pan-up | touch-action: pan-up;
|
touch-action:pan-down | touch-action: pan-down;
|
touch-action:pinch-zoom | touch-action: pinch-zoom;
|
touch-action:manipulation | touch-action: manipulation;
|
touch-action:<value> | touch-action: <value>;
|
Examples
Disable browser gestures on a custom surface
Use touch-action:none for canvases or drag surfaces that handle their own touch gestures.
<canvas class="touch-action:none"> Drawing surface</canvas>Generated CSS
@layer utilities { .touch-action\:none { touch-action: none }}Allow vertical scrolling
Use touch-action:pan-y for horizontal carousels so the page can still scroll vertically.
<div class="overflow-x:auto touch-action:pan-y"> Carousel</div>Optimize tap controls
Use touch-action:manipulation on buttons and links when the element only needs tap and click behavior.
<button class="touch-action:manipulation"> Submit</button>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="touch-action:none:hover touch-action:pan-y@sm touch-action:auto@print">...</div>