互動性
touch-action
用於控制元素在觸控螢幕上的滾動和縮放方式的實用工具。
| 類別 | 樣式 |
|---|---|
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; |
範例
基本範例
使用 touch-pan-y 和 touch-pinch-zoom 等實用工具來控制元素在觸控螢幕上如何滾動 (平移) 和縮放 (捏合)。
嘗試在觸控螢幕上平移這些圖片
touch-auto
touch-none
touch-pan-x
touch-pan-y
<div class="h-48 w-full touch-auto overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-none overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-x overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-y overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div>響應式設計
前綴a touch-action 實用工具 與斷點變體 (如 md:) 搭配使用，僅在中型 螢幕尺寸及以上套用該實用工具
<div class="touch-pan-x md:touch-auto ..."> <!-- ... --></div>請參閱變體文件，以瞭解更多關於使用變體的信息。
