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

• 横スクロールできることをユーザーに伝える方法がわからない
• ScrollHintの使い方がわからない
• スクロールヒントの細かな設定方法を知りたい

この記事では、スクロール可能な要素にヒントを表示するプラグイン「ScrollHint」について解説します。
スクロール操作をわかりやすくすることで、ユーザー体験を向上させたい方におすすめです。

ScrollHintとは？

ScrollHintは、スクロール操作をサポートするJavaScriptライブラリです。

スクロールできることを伝えるアニメーションを表示し、ユーザーに直感的にスクロール操作を促すことで、ユーザー体験を向上させることができます。

公式サイトはこちら

ScrollHintを使うメリット

ScrollHintを使用することで得られるメリットは以下の通りです。

• スクロール可能なことをユーザーに分かりやすく伝えられるため、ユーザー体験が向上
• 豊富なオプションにより、Webページに合わせたカスタマイズが可能
• サイズが軽量で、サイトのパフォーマンスに影響を与えない

ScrollHintを導入することで、ユーザーにとってわかりやすいスクロール操作を、ページの表示スピードを落とさず簡単に実装できます。

ScrollHintの使い方

ScrollHintの導入手順は以下の通りです。

必要ファイルを読み込む

まず、HTML内で scroll-hint.css と scroll-hint.min.js を読み込みます。以下の2つの方法があります。

1. ファイルをダウンロードして読み込む
2. CDNを使用して読み込む

CDNリンクは公式ページで提供されています。CDNを使用する場合、以下のコードをHTMLに追加してください。

<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="js-scrollable">
  <table>
    <tr>
      <th>タイトル1</th>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <!-- 省略 -->
      <td>テキスト10</td>
    </tr>
  </table>
</div>

これでスクロールヒントが表示されるようになります。

ScrollHintのオプション

ScrollHintには、多くのオプションが用意されており、柔軟なカスタマイズが可能です。
以下は主要なオプションの一部です。

• suggestClass: 要素がスクロールインされたときに追加されるクラス名
• scrollableClass: 要素がスクロール可能な場合に追加されるクラス名
• scrollableRightClass: 要素が右スクロール可能の場合に追加されるクラス名
• i18n.scrollable: スクロール可能なテキストの表示を変更

デフォルトでは英語で表示されるテキストを、日本語に変更する例です。

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

まとめ

ScrollHintは、スクロール可能な要素を直感的に示すための便利なライブラリです。
表示速度に影響を与えず、ユーザー体験を向上させることができます。

オプションが豊富なので、Webサイトのデザインに合わせたカスタマイズが可能です。
特に、テーブルのスクロールに使用する場合、列や行を固定することでさらにユーザーフレンドリーなサイトを制作することができます。