横スクロールをドラッグで操作

解説

マウスを長押ししたまま左右へ動かすと、横並びのカルーセル領域がドラッグでスクロールする UI です。overflow-x:auto で横スクロール可能にした行に対し、pointerdown で開始位置と現在の scrollLeft を記録し、pointermove でマウスの移動量だけ scrollLeft を動かします。ボタンを離す・領域から出ると pointerup や pointerleave で状態を解除します。ドラッグ中は is-drag クラスでカーソルを grab から grabbing に変え、user-select:none で文字の選択を防いでいるのが操作感のポイントです。

使う場面と注意

画像の横並びギャラリー、カードのカルーセル、タグやカテゴリの横スクロールなど、スクロールバーを出さずに動かしたい場面に向きます。pointer 系イベントを使っているのでマウスでもタッチでも同じコードで動きます。注意点として、領域内のリンクや画像は draggable の既定動作と競合することがあるため、画像に対して標準のドラッグを無効化しておくと安定します。タッチ端末ではブラウザ標準のスワイプでも動くので、その上に重ねる形になります。scroll-behavior をドラッグ中だけ auto にし、追従が遅れないようにしている点も覚えておくと調整が楽です。