スマホで複雑な操作をする部品は「タップしてから操作」にし、スクロールを止めるのはその時だけにする
触れる部品とページのスクロールは、タッチ画面では同時にうまく両立できない。最初のタップで「操作モード」に入る形にすると、ふだんは自由にスクロールできる。
どんな問題を解決するか / いつ使うか
ドラッグ・スワイプ・つまむなどで遊べるデモ部品を縦に並べたページ（部品のショーケース、インタラクティブな記事、LPのデモ）では、指を置いた瞬間に部品が反応すると、ページをスクロールしたいだけの人が引っかかる。Emil Kowalski は自分のデモ集でこう解決している。
やり方
- 部品は最初、スクロールを邪魔しない状態にしておく（ドラッグ操作を受け付けない、または
touch-actionでページのスクロールを優先する）。 - 部品をタップしたら操作モードに入り、その間だけページのスクロールを止める。
- 操作モード中であることが見て分かるようにする（枠や影を付ける、閉じる手段を置くなど）。
- 部品の外をタップするか閉じる操作で元に戻し、スクロールを再開する。
注意点
- 投稿は考え方と動画のみで、実装のコードは載っていない。手順の2〜4はこの考え方を実装する場合の一般的な形として書いた。
- スクロールを止める処理は、戻し忘れるとページが動かなくなる。閉じる経路を必ず用意する。
- PCのマウス操作では、この切り替えは要らないことが多い。