Reactで、つかんで横にスクロールできるリストを作る方法

.drag-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  cursor: grab;
}

.drag-scroll.is-dragging {
  cursor: grabbing;
}

.drag-scroll > * {
  flex: 0 0 160px;
}

clientWidth=388 scrollWidth=2036 scrollLeft の最大=1648 / cursor=grab

import { useRef, useState, type ReactNode, type PointerEvent } from 'react';

// これだけ動いたら、クリックではなくドラッグとみなす（px）
const DRAG_THRESHOLD = 5;

type Props = {
  children: ReactNode;
  label: string;
};

export function DragScrollList({ children, label }: Props) {
  const drag = useRef({ pointerId: -1, startX: 0, startScrollLeft: 0, moved: false });
  const [dragging, setDragging] = useState(false);

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    // 指やペンはブラウザの標準のスクロールに任せ、マウスの左ボタンだけを扱う
    if (e.pointerType !== 'mouse' || e.button !== 0) return;
    drag.current = {
      pointerId: e.pointerId,
      startX: e.clientX,
      startScrollLeft: e.currentTarget.scrollLeft,
      moved: false,
    };
  };

  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    const d = drag.current;
    if (e.pointerId !== d.pointerId) return;
    const dx = e.clientX - d.startX;
    if (!d.moved) {
      if (Math.abs(dx) < DRAG_THRESHOLD) return;
      // ここで初めてドラッグとみなし、ポインターを枠に捕まえる
      d.moved = true;
      e.currentTarget.setPointerCapture(e.pointerId);
      setDragging(true);
    }
    e.currentTarget.scrollLeft = d.startScrollLeft - dx;
  };

  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
    if (e.pointerId !== drag.current.pointerId) return;
    drag.current.pointerId = -1;
    setDragging(false);
  };

  return (
    <div
      className={dragging ? 'drag-scroll is-dragging' : 'drag-scroll'}
      role="region"
      aria-label={label}
      tabIndex={0}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
      // リンクや画像を、ブラウザの標準の動きでドラッグさせない
      onDragStart={(e) => e.preventDefault()}
    >
      {children}
    </div>
  );
}

1回目: scrollLeft=380 / 選んだカード：なし / hash=""
2回目: scrollLeft=760 / 選んだカード：なし / hash=""
3回目: scrollLeft=1140 / 選んだカード：なし / hash=""
4回目: scrollLeft=1520 / 選んだカード：なし / hash=""
5回目: scrollLeft=1648 / 選んだカード：なし / hash=""

import { useState } from 'react';
import { DragScrollList } from './DragScrollList';

const items = Array.from({ length: 10 }, (_, i) => ({
  id: i + 1,
  title: `カード ${i + 1}`,
  text: '説明の文章が入ります。',
}));

export function App() {
  const [selected, setSelected] = useState<number | null>(null);

  return (
    <main>
      <DragScrollList label="おすすめのカード">
        {items.map((item) => (
          <a
            key={item.id}
            className="card"
            href={`#card-${item.id}`}
            onClick={() => setSelected(item.id)}
          >
            <strong>{item.title}</strong>
            <span>{item.text}</span>
          </a>
        ))}
      </DragScrollList>
      <p id="selected">選んだカード：{selected ?? 'なし'}</p>
    </main>
  );
}

カード 2 の上から左へ100px（押したまま）: scrollLeft=100 / 選んだカード：なし / hash="" / class="drag-scroll is-dragging" / cursor=grabbing
さらに左へ、合わせて200px引いて離す: scrollLeft=200 / 選んだカード：なし / hash="" / 離したときにマウスの下にあったカード: カード 2 / pointerdown(カード 2) dragstart(カード 2) pointerup(枠) click(枠)

さらに左へ、合わせて200px引いて離す: scrollLeft=200 / 選んだカード：2 / hash="#card-2" / 離したときにマウスの下にあったカード: カード 2 / pointerdown(カード 2) dragstart(カード 2) pointerup(カード 2) click(カード 2)

動かさずにカード 2 をクリック: scrollLeft=0 / 選んだカード：なし / hash="" / pointerdown(カード 2) pointerup(枠) click(枠)

3px: scrollLeft=0 / 選んだカード：2 / hash="#card-2" / pointerdown(カード 2) pointerup(カード 2) click(カード 2)
4px: scrollLeft=0 / 選んだカード：2 / hash="#card-2" / pointerdown(カード 2) dragstart(カード 2) pointerup(カード 2) click(カード 2)
6px: scrollLeft=6 / 選んだカード：なし / hash="" / pointerdown(カード 2) dragstart(カード 2) pointerup(枠) click(枠)

カード 2 の上から左へ100px（押したまま）: scrollLeft=10 / 選んだカード：なし / hash="" / class="drag-scroll" / cursor=grab
さらに左へ、合わせて200px引いて離す: scrollLeft=10 / 選んだカード：なし / hash="" / 離したときにマウスの下にあったカード: カード 1 / pointerdown(カード 2) dragstart(カード 2) pointercancel(カード 2)

記事の版（マウスだけを扱う）: scrollLeft=202 / 選んだカード：なし / hash="" / pointerdown(カード 2) pointercancel(カード 2)
pointerType を見ない版: scrollLeft=280 / 選んだカード：なし / hash="" / pointerdown(カード 2) pointercancel(枠)

フォーカス: region "おすすめのカード"
右矢印 3回: scrollLeft=120 / 選んだカード：なし / hash=""