知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目
今日は CSS の touch-action プロパティです。指操作の制御をします。
デモはタッチ対応端末でご覧ください。主にスマホ。
基本的な使い方
.untouchable {
touch-action: none;
}
だいたいこんな値です。
auto– 通常none– 反応しないpan-y– 縦方向スクロールのみpinch-zoom– ズームのみmanipulation– スクロールとズームのみ（ダブルタップでの拡大を無効化）
他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。
Pointer Events 関係の仕様です。IE でも動きます。
使いどころ
タッチ操作の UI を作るとき、ドラッグする場面で画面までスクロールしちゃうのを防いだりできます。普通に便利。
おしまい
none にしてもマウスやキーボードの操作は利きます。