【React】ドラッグでスクロールを制御するライブラリ React Indiana Drag Scroll の紹介

react-indiana-drag-scroll – npm
　 React Indiana Drag Scroll はマウスによるドラッグでスクロールを行う機能を React 内で HTML やコンポーネントに持たせるためのライブラリです。使い方は React Indiana Drag Scroll から渡されるコンポーネントでスクロール範囲を括るのみです。具体的には次です。

import React from "react";
import "./styles.css";

import ScrollContainer from "react-indiana-drag-scroll";
/** min から max までの数字の入った配列を生成する関数 */
const range = (min, max, step = 1) => {
  return Array.from(
    { length: (max - min + step) / step },
    (v, k) => min + k * step
  );
};
export default function App() {
  return (
    <div className="App">
      <h1>React Indiana Drag Scrollデモ</h1>
      <p>↓の箱の上でドラッグをするとスクロールが起きます</p>
      <div
        style={{ position: "relative", overflow: "hidden", border: "solid" }}
      >
        {/** ScrollContainer でドラッグ範囲を括ります */}
        {/** ignoreElements にドラッグしない部分を指すセレクタを入れると、その上からスクロールできません */}
        <ScrollContainer ignoreElements={"#not-work-drag"}>
          <div
            id="not-work-drag"
            style={{
              height: "100%",
              background: "rgba(0, 208, 255, 0.8)",
              position: "absolute",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              left: "12%"
            }}
          >
            <div>この上では</div>
            <div>ドラッグしてもスクロールしません</div>
          </div>
          <div style={{ display: "flex" }}>
            {range(0, 100).map((i) => (
              <div style={{ margin: "1em .25em" }}>{i}</div>
            ))}
          </div>
        </ScrollContainer>
      </div>
    </div>
  );
}

　便利ながら分かりにくい props に ignoreElements があります。これに渡すと渡されたセレクタに該当する HTML 要素の上からはドラッグによるスクロールが働かなくなります。
　基本的な設定は props から渡せますが内部の HTML 要素にアクセスすることも可能です。外から命令的にスクロール状態を制御するには次のコードの様に HTML 要素から素のJavaScript 的に色々するのがよいです。

export default function App() {
  const scrollRef = React.createRef();

  // scrollRef が変化したら適当な場所に向かってスクロールを実行
  React.useEffect(() => {
    if (!scrollRef.current) {
      return;
    }
    const scrollRefElement = scrollRef.current?.getElement();
    scrollRefElement.scrollTo(
      Math.random() * scrollRefElement.getBoundingClientRect().width,
      0
    );
  }, [scrollRef]);

  return (
    <ScrollContainer ref={scrollRef}>
      {/* スクロール内容 */}
    </ScrollContainer>
  );
}