Webサイトのデザインにおいて、すべてをそのまま表示するとデザインが崩れてしまうことが多々あります。そこで文字を途中で途切れさせたり、詳細はこちらといった具合に別リンクに飛ばしたりします。もう一つの手法として、ページ内でスクロールを設ける方法があります。 今回はOverlay Scrollbarsを紹介します。ページ内にスクロールを設け、大きなコンテンツでも表示できるようにするライブラリです。

Overlay Scrollbarsの使い方

スクロールの表示例です。縦横、どちらにも付けられます。

スクロールバーのデザインは変更できます。

ネストしたスクロールバー。これはさすがに使いづらそうです。

設定はダイナミックに反映できます。

Overlay Scrollbarsを使えばページ内に自由にスクロールを配置できます。一覧表を載せたりする際に使ってみるとよさそうです。あまり多用するのはお勧めできませんが、業務システムやユーザが作成したコンテンツを表示する際などには便利そうです。

Overlay ScrollbarsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Overlay Scrollbars - Javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars. KingSora/OverlayScrollbars: A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.