CSS - touch-action

概要

属性名touch-action
値auto | none | <pan> | manipulation
詳細 <pan> = [ <pan-x> || <pan-y> || pinch-zoom ]
<pan-x> = [ pan-x | pan-left | pan-right ]
<pan-y> = [ pan-y | pan-up | pan-down ]
初期値auto
サポートhttps://caniuse.com/css-touch-action

説明

スマホやタブレットにおいて、パン(指1本で上下左右にスクロールする)やズーム(指2本で拡大や縮小する)の操作を抑制します。pan-* を指定すると指定した方向以外すべてのパンやズームが禁止されます。許可したい時は pan-left pan-up pinch-zoom などのように複数指定してください。

値説明
autoブラウザの挙動に従います。
noneすべてのパンやズームを禁止します。
pan-x左右スクロール以外のパンを禁止します。
pan-left左スクロール以外のパンを禁止します。
pan-right右スクロール以外のパンを禁止します。
pan-yスクロールアップ・ダウン以外のパンを禁止します。
pan-upスクロールアップ以外パンを禁止します。
pan-downスクロールダウン以外のパンを禁止します。
pinch-zoom複数の指によるパンやズームを有効にします。
manipulationパン、ズームは有効にしますが、ダブルタップなどによる操作は禁止します。

使用例

CSS
.ta-box {
  width: 150vw;
  margin-bottom: 1rem;
  background-color: #fdd;
  padding: .5rem;
}
.ta-auto { touch-action: auto; }
.ta-none { touch-action: none; }
.ta-pan-x { touch-action: pan-x; }
.ta-pan-left { touch-action: pan-left; }
.ta-pan-right { touch-action: pan-right; }
.ta-pan-y { touch-action: pan-y; }
.ta-pan-up { touch-action: pan-up; }
.ta-pan-down { touch-action: pan-down; }
.ta-pinch-zoom { touch-action: pinch-zoom; }
.ta-manipulation { touch-action: manipulation; }
HTML
<div class="ta-box ta-auto">auto</div>
<div class="ta-box ta-none">none</div>
<div class="ta-box ta-pan-x">pan-x</div>
<div class="ta-box ta-pan-left">pan-left</div>
<div class="ta-box ta-pan-right">pan-right</div>
<div class="ta-box ta-pan-y">pan-y</div>
<div class="ta-box ta-pan-up">pan-up</div>
<div class="ta-box ta-pan-down">pan-down</div>
<div class="ta-box ta-pinch-zoom">pinch-zoom</div>
<div class="ta-box ta-manipulation">manipulation</div>
表示
auto
none
pan-x
pan-left
pan-right
pan-y
pan-up
pan-down
pinch-zoom
manipulation

リンク

Copyright (C) 2023 杜甫々
初版：2023年4月2日、最終更新：2023年4月2日
https://www.tohoho-web.com/css/prop/touch-action.htm