【Next.js】【スクロールバー】simplebar-reactを使った例

2024-10-13 作成

この記事でわかること

simplebar-react を使ったスクロールバー実装の特徴と実装例

特徴

cssで制御してる分動きが若干遅い

実装例

src/pages/index.tsx

import SimpleBar from 'simplebar-react';

const simpleBarWrapper = {
  .simplebar-track {
    # ...
  }
  .simplebar-content {
    display: flex;
    # ...
  }
  .simplebar-horizontal {
    # ...
  }
  .simplebar-scrollbar {
    # ...
  }
}

export const HOME = () => {
  return (
    <div style={simpleBarWrapper}>
        <SimpleBar autoHide={false} forceVisible="x">
          {[...Array(20)].map((_, index) => {
            return <li key={index} />;
          })}
        </SimpleBar>
      </div>
  );
};

参考

simplebar-react