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

2024.05.22

URLをコピーしました！

こんにちは。すずきです。

この記事ではスクロール可能な要素にヒントを表示するプラグイン「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を使用することで以下のようなメリットがあります。

スクロール可能なことがユーザーに伝わりやすいため、ユーザー体験が向上
オプションにが豊富なため、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には様々なオプションが用意されています。

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

スクロールできます

名前	デフォルト	説明
suggestClass	is-active	要素がスクロールインされたときに追加されるクラス名
scrollableClass	is-scrollable	要素がスクロール可能な場合に追加されるクラス名
scrollableRightClass	is-right-scrollable	要素が右スクロール可能の場合に追加されるクラス名
scrollableLeftClass	is-left-scrollable	要素が左スクロール可能の場合に追加されるクラス名
scrollHintClass	scroll-hint	要素に追加するクラス名
scrollHintIconClass	scroll-hint-icon	アイコンに追加するクラス名
scrollHintIconAppendClass	scroll-hint-icon-white	要素のアイコンに追加する別のクラス名
scrollHintIconWrapClass	scroll-hint-icon-wrap	アイコンのラッパーに追加するクラス名
scrollHintText	scroll-hint-text	テキストに追加するクラス名
remainingTime	-1	スクロールヒントアイコンを非表示にするタイミング (ミリ秒)
scrollHintBorderWidth	10	要素のシャドーボックスの境界幅
enableOverflowScrolling	true	iOS を使用し、値が true の場合、要素に -webkit-overflow-scrolling プロパティが追加されます
suggestiveShadow	false	要素がスクロール可能な場合、暗示的な影を表示する
applyToParents	false	JavaScript を親要素に適用する
offset	0	スクロール可能の基準を変更できます。
i18n.scrollable	scrollable	ここからスクロール可能なテキストを変更できます

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

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

終わりに

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

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

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