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

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

このような人にオススメ

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

ScrollHintとは

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

ScrollHintを使うメリット

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

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

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

ScrollHintの使い方

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

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

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

• ファイルをダウンロードし、ディレクトリ内で読み込む
• CDNで読み込む

公式ページからダウンロードが可能で、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>タグでスクロールする場合、端の列や行を固定することで更にユーザーが見やすいサイトを制作することが可能です。
こちらの記事で詳しい内容を紹介しています。

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

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