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

2024-10-13 作成

この記事でわかること

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

特徴

ios safariだと2重にスクロールバーが表示される（iosのデフォルトスクロールバーだけ表示することはできる）
動きがスムーズ
スクロールバーの位置をコンテンツエリアの外側に配置しづらい（できないかも）

実装例

src/pages/index.tsx

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

const listWrapper = {
  .os-scrollbar.os-scrollbar-horizontal {
    --os-size: 10px;
    --os-handle-border-radius: 10px;
    --os-handle-bg: blue;
    --os-padding-perpendicular: 0;
    --os-padding-axis: 0;
    background-color: gray;
    border-radius: 5px;
  }
}

const list = {
  display: flex;
  align-items: center;
}

export const HOME = () => {
  return (
    <div style={listWrapper}>
        <OverlayScrollbarsComponent>
          <ul style={list}>
            {[...Array(20)].map((_, index) => {
              return <li key={index} />;
            })}
          </ul>
        </OverlayScrollbarsComponent>
      </div>
  );
};

参考

OverlayScrollbars