【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！

この記事ではスクロール可能な要素にヒントを表示するプラグイン「ScrollHint」について解説します。

ScrollHintとは

ScrollHintは、スクロール操作を支援するJavaScriptライブラリです。
ScrollHintを使用することで、スクロールできることを伝えるアニメーションを表示することができます。
これによりユーザー体験を向上することができます。

ScrollHint

ScrollHint A JavaScript library to suggest that the elements are scrollable horizontally, with the pointer icon.

ScrollHintを使うメリット

ScrollHintを使用することで以下のようなメリットがあります。

ScrollHintを使用することで、ヒントの簡単な実装によるユーザー体験の向上、webページに合わせたカスタマイズを表示スピードを落とさず簡単に実装することができます。

ScrollHintの使い方

実際にScrollHintを使用する場合の導入方法を紹介します。

必要ファイルをを読み込む

まずはHTML内でscroll-hint.cssscroll-hint.min.jsを読み込みます。
各ファイルの読み込み方法は以下の2つがあります。

公式ページからダウンロードが可能で、CDNリンクも記載されています。
CDNの場合は下記コードで読み込むことができます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

ScrollHintを初期化する

次に、JavaScriptでScrollHintを初期化します。以下のコードを記述してください。

<script>
  new ScrollHint('.js-scrollable');
</script>

.js-scrollableの部分はHTMLに記述するクラス名になりますので適宜変更してください。

HTMLの表示する要素にクラスを指定する

最後にヒントを表示する要素に先ほど指定したクラスを指定します。
今回の場合、.js-scrollableになります。

<div class="table__container js-scrollable">
  <table>
    <tr>
      <th>タイトル1</th>
      <td>テキスト1</td>
      <td>テキスト2</td>
      ・
      ・
      ・
      <td>テキスト9</td>
      <td>テキスト10</td>
    </tr>
  </table>
</div>

これでScrollHintを表示することができます。

実際に制作したデモが以下になります。

See the Pen ScrollHint実装デモ by すずき (@k-suzuki3533) on CodePen.

ScrollHintのオプション

ScrollHintには様々なオプションが用意されています。

以下が用意されているオプションになります。

デフォルトではテキストが英語で表記されるので、日本語に直す必要があります。
自分は使用する時、主にこちらのカスタマイズで使用しています。

<script>
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます",
    },
  });
</script>

終わりに

ScrollHintは、スクロール表示をサポートする便利なライブラリです。

表示スピードを落とさず、ユーザー体験を向上させることができます。
また、オプションも豊富なので、制作するwebサイトに合わせてカスタマイズが可能です。

<table>タグでスクロールする場合、端の列や行を固定することで更にユーザーが見やすいサイトを制作することが可能です。
こちらの記事で詳しい内容を紹介しています。

あわせて読みたい

【CSS】tableの列（行）をスクロール時に固定する方法 こんにちは。すずきです。 この記事ではtableのスクロール時に列や行を固定する方法について解説します。 このような人にオススメ テーブルのヘッダーを画面上部に固定...

ぜひ使用してみてください。

私がよく使うプラグインを以下記事でまとめています。
よければ参考にしてください。

あわせて読みたい

【JavaScript】実務でよく使うおすすめプラグイン一覧 おすすめのjsプラグインが知りたい プラグインの使い方について知りたい 簡単にサイトに動きを実装したい このような悩みに答えます。 JavaScriptとjQueryのプラグイン...