ドラッグ横スクロール

解説

横並びのカードをマウスで掴んで左右に流せる、ドラッグ横スクロールのパーツです。overflow-x:autoで横スクロール領域を作り、mousedownで掴んだ位置を記録、mousemoveでその差分だけscrollLeftを動かして追従させています。掴んでいる間はcursor:grabからgrabbingへ切り替え、いま操作中だと分かるようにしているのが体験上のポイントです。

こんなときに便利

• サムネイルや商品カードを横並びで見せたいギャラリー
• カテゴリーやタグを横一列に並べる絞り込みバー
• スクロールバーを出したくない横長のカルーセル風一覧

scrollbar-width:noneと::-webkit-scrollbarの非表示でバーを隠し、すっきり見せています。カード幅はflex:0 0 140pxの値で固定しているので、ここを変えれば1枚あたりの大きさを調整できます。スマホは指でのスワイプが標準で効くため、本スクリプトは主にPCのマウス操作を補う役割です。バーを隠す場合は「横に流せる」ことが伝わるよう、端に余白やぼかしを足すと迷いません。