Web上でダッシュボードなどを提供すると、様々な情報をまとめて表示しなければなりません。何も考えずに表示してしまうと、縦スクロールがすごいことになるでしょう。そこでページ内のコンポーネントごとにスクロールがあると便利です。 SimpleBarはそんなページ内スクロールを提供するライブラリです。依存性もなく簡単に使えるのがポイントです。

SimpleBarの使い方

スクロール例です。ページ内にスクロールバーが表示されます。これはスクロール時しか表示されません。

逆に常にスクロールバーを表示することもできます。

縦だけでなく横スクロールも可能です。

ドロップダウンと組み合わせる方法も。

SimpleBarは数多い情報をコンパクトにまとめて表示するのに特化しています。複雑なことをしないので、様々な情報と組み合わせられるでしょう。業務システムなど、一ページに表示する情報が多い場合に活躍しそうです。

SimpleBarはCSS/JavaScript製のオープンソース・ソフトウェア（MIT）です。

SimpleBar - Custom scrollbars made simple Grsmto/simplebar: Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.