danovinTasks/src/components/IndianaDragScroll/index.js

import React from "react";

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 IndianaDragScroll() {
  return (
    <div className="bg-blue-400 p-4 h-52">
      <ScrollContainer ignoreElements={"#not-work-drag"}>
        <div
          className="bg-red-400   h-52"
          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 className="flex flex-col  h-52 bg-red-400" style={{}}>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
          <div>mahdi</div>
        </div>
      </ScrollContainer>
      <div className="w-full bg-yellow-300 h-5 my-20 text-center text-base text-red-600 rounded">
        divider between vertical && horizontal scroll bar inside
        IndianaDragScroll COMPONENT
      </div>
      <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, index) => (
            <div key={index} style={{ margin: "1em .25em" }}>
              {i}
            </div>
          ))}
        </div>
      </ScrollContainer>
    </div>
  );
}