@neruco/horizontal-scroll

任意の横長コンテンツに、ドラッグ可能なカスタム横スクロールバーを追加する軽量なVanilla JSライブラリです。

テーブル、カード一覧、画像一覧、コードブロックなどに使用できます。依存ライブラリはありません。

インストール

npm install @neruco/horizontal-scroll

基本的な使い方

import HorizontalScroll from "@neruco/horizontal-scroll";
import "@neruco/horizontal-scroll/style.css";

const horizontalScroll = new HorizontalScroll(
  ".js-horizontalScroll"
);

scriptタグで読み込む

IIFE版を使用すると、npmのimportを使わない静的HTMLやWordPressテーマでも利用できます。

<link
  rel="stylesheet"
  href="./horizontal-scroll.css"
/>

<script src="./horizontal-scroll.iife.js"></script>

<script>
  const horizontalScroll = new HorizontalScroll(
    ".js-horizontalScroll"
  );
</script>

IIFE版では、HorizontalScrollがグローバル変数として公開されます。

<div class="js-horizontalScroll">
  <div class="js-horizontalScroll__viewport">
    <div>
      横に長いコンテンツ
    </div>
  </div>

  <div
    class="js-horizontalScroll__scrollbar"
    aria-hidden="true"
  >
    <div class="js-horizontalScroll__thumb"></div>
  </div>
</div>

複数設置

同じページ内に複数の.js-horizontalScrollを設置できます。

const horizontalScroll = new HorizontalScroll(
  ".js-horizontalScroll"
);

各要素は独立して動作します。

オプション

const horizontalScroll = new HorizontalScroll(
  ".js-horizontalScroll",
  {
    minThumbWidth: 48,
    smoothTrackClick: false,
  }
);

| オプション | 初期値 | 説明 | |---|---:|---| | viewportSelector | .js-horizontalScroll__viewport | スクロール領域 | | scrollbarSelector | .js-horizontalScroll__scrollbar | スクロールバートラック | | thumbSelector | .js-horizontalScroll__thumb | つまみ | | initializedClass | is-initialized | 初期化済みクラス | | scrollableClass | is-scrollable | 横スクロール可能時のクラス | | draggingClass | is-dragging | ドラッグ中のクラス | | minThumbWidth | 40 | つまみの最小幅 | | smoothTrackClick | true | トラッククリック時のスムーススクロール |

動的な内容変更後に再計算

horizontalScroll.update();

ResizeObserverでも自動更新されますが、DOM更新直後に明示的に再計算したい場合に使用できます。

解除

horizontalScroll.destroy();

登録したイベント、監視、状態クラス、インラインスタイルを解除します。

独自のクラス名を使う

new HorizontalScroll(".js-cardScroll", {
  viewportSelector: ".js-cardScroll__viewport",
  scrollbarSelector: ".js-cardScroll__scrollbar",
  thumbSelector: ".js-cardScroll__thumb",
});

開発

npm install
npm run dev

ビルド

npm run build

distディレクトリへ以下を出力します。

dist/
├── horizontal-scroll.js
├── horizontal-scroll.js.map
├── horizontal-scroll.cjs
├── horizontal-scroll.cjs.map
├── horizontal-scroll.iife.js
├── horizontal-scroll.iife.js.map
├── horizontal-scroll.css
└── index.d.ts

Repository

GitHub: https://github.com/coder-ao/horizontal-scroll

License

MIT