お役立ちコラム
JavaScript

ScrollHintの使い方！横スクロールできる要素にヒントを表示する方法

公開日： / 更新日：

※本記事には広告が含まれます。

今回は横スクロールできる要素にヒントを表示するJavaScriptライブラリ「ScrollHint」の使い方を解説します。

ScrollHintを使用すると、要素が横スクロール可能な状態になったタイミングを自動で検知し、ユーザーに「スクロールできます」というヒントを表示してくれます。

スマートフォンなどでテーブルを横スクロールできるようにしているものの、ユーザーが気づいてくれるか不安という方には、ぜひ使ってみることをおすすめします。

See the Pen ScrollHint demo i18n.scrollable by E-VALUE WORKS (@evw) on CodePen.

ScrollHintのインストール方法

ScrollHintをインストールするには以下の3つの方法があります。

ScrollHintのインストール方法
  • ファイルをローカル上にダウンロードしてきて使う方法
  • CDNを使う方法
  • npmを使う方法

ファイルをローカル上にダウンロードしてきて使う方法

ファイルをローカル上にダウンロードしてきて使うには、公式サイトを開きます。

https://appleple.github.io/scroll-hint

「Download」をクリックします。

そうすると、「scroll-hint-master .zip」というフォルダがダウンロードされます。

解凍して中を見ると、様々なファイルが含まれていますが、実際に読み込む必要があるファイルは「css＞scroll-hint.css」と「js＞scroll-hint.min.js」の2ファイルです。

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ScrollHintの使い方</title>
  <link rel="stylesheet" href="css/scroll-hint.css">
  <link rel="stylesheet" href="css/my-style.css">
</head>

<body>
  <!-- ページコンテンツ -->
  <script src="js/scroll-hint.min.js"></script>
  <script src="js/my-script.js"></script>
</body>

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>

npmを使う方法

Webpackなどのモジュールバンドラに組み込んで利用したい場合は、ターミナルを開き「npm install scroll-hint –save」を実行します。

そうすると、「node_modules」の中にScrollHintのパッケージがインストールされます。

実際に使用する際は、importを使ってモジュールを読み込みます。

import ScrollHint from "scroll-hint";
import "scroll-hint/css/scroll-hint.css";

ScrollHintの使い方

ここに、セル内のテキストが折り返されそうになった際に横スクロールが発生するテーブルを用意しました。

■HTML

<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>日付</th>
                <th>イベント名</th>
                <th>場所</th>
                <th>開始時間</th>
                <th>終了時間</th>
                <th>参加費</th>
                <th>定員</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10/29</td>
                <td>WordPress講座</td>
                <td>大阪〇〇会議室</td>
                <td>13:00</td>
                <td>16:00</td>
                <td>¥6,000</td>
                <td>10名</td>
                <td>初心者歓迎</td>
            </tr>
            <tr>
                <td>11/5</td>
                <td>フロントエンド講座</td>
                <td>大阪〇〇会議室</td>
                <td>13:00</td>
                <td>16:00</td>
                <td>¥6,000</td>
                <td>10名</td>
                <td>懇親会あり</td>
            </tr>
        </tbody>
    </table>
</div>

■CSS

.wrap {
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

table thead th {
  border-bottom: 2px solid #ccc;
  padding: 0.8em 1.2em;
  font-weight: 600;
  background-color: #f5f5f5;
}

table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

table tbody td {
  border-bottom: 1px solid #ddd;
  padding: 0.8em 1.2em;
}

これにScrollHintを使って、横スクロールが発生したタイミングでスクロールヒントを表示させる方法を解説します。

まず、JavaScriptから制御していることが分かるよう、ラップ要素に.js-scrollableというクラス名を付けます。

<div class="wrap js-scrollable">
    <table>
        <thead>
            <tr>
                <th>日付</th>
                <th>イベント名</th>
                <th>場所</th>
                <th>開始時間</th>
                <th>終了時間</th>
                <th>参加費</th>
                <th>定員</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <!-- 省略 -->
        </tbody>
    </table>
</div>

.js-scrollable要素に対して、ScrollHintクラスを初期化します。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {});
});

これで、テーブルにスクロールヒントが表示されるようになりました。

See the Pen ScrollHint demo① by E-VALUE WORKS (@evw) on CodePen.

ScrollHintを初期化すると、対象のラップ要素には自動的にoverflowスタイルが適用されるため、自分で指定していたoverflow要素は消してしまっても大丈夫です。

■HTML

<div class="js-scrollable">
    <table>
        <thead>
            <tr>
                <th>日付</th>
                <th>イベント名</th>
                <th>場所</th>
                <th>開始時間</th>
                <th>終了時間</th>
                <th>参加費</th>
                <th>定員</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <!-- 省略 -->
        </tbody>
    </table>
</div>

■CSS

/* .wrap {
  overflow: auto; // なくても良い
} */

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

table thead th {
  border-bottom: 2px solid #ccc;
  padding: 0.8em 1.2em;
  font-weight: 600;
  background-color: #f5f5f5;
}

table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

table tbody td {
  border-bottom: 1px solid #ddd;
  padding: 0.8em 1.2em;
}

なお、ScrollHintを初期化する際に、第二引数として渡すオブジェクトに各種オプションを指定することで、見た目や動作をカスタマイズできます。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    // こちらにオプションを追記していく
    i18n: {
      scrollable: "スクロールできます。",
    },
  });
});

See the Pen ScrollHint demo i18n.scrollable by E-VALUE WORKS (@evw) on CodePen.

ScrollHintのオプションについては次章で詳しく解説します。

ScrollHintのオプション

ScrollHintで使えるオプションはいくつかありますが、使用頻度の高そうなものは以下の通りです。

デフォルト値説明
i18n.scrollablescrollableヒントとして表示されるテキストを変更するためのオプション。
remainingTime-1（スクロールを動かすまで消えない）スクロールヒントを非表示にするまでの時間（ミリ秒単位）を指定するオプション。
suggestiveShadowfalse横スクロール可能な場合に影を表示するかどうかを指定するオプション。
scrollHintIconAppendClassなしスクロールヒントアイコンに追加で付与するクラス名を指定するオプション。

i18n.scrollable：ヒントテキストの変更

デフォルトでは、スクロールヒントのテキストとして「scrollable」と表示されますが、これを変えたい場合は以下のように記述します。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます。",
    },
  });
});

See the Pen ScrollHint demo i18n.scrollable by E-VALUE WORKS (@evw) on CodePen.

これで「スクロールできます。」と日本語テキストに変更できました。

remainingTime：ヒントを非表示にするまでの時間

デフォルトでは、ヒントはユーザーが実際にスクロール操作を行うまで表示されたままになります。

これを、何秒後に非表示にするかを指定したい場合は「remainingTime」を指定します。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます。",
    },
    remainingTime: 2000,
  });
});

これで、ユーザーがスクロール操作を行わなくても2秒後に自動でスクロールヒントが非表示になります。

See the Pen ScrollHint demo remainingTime by E-VALUE WORKS (@evw) on CodePen.

この時間は、要素がビューポート内に入ってからの経過時間としてカウントされます。

suggestiveShadow：横スクロール可能な場合に影を表示する

横スクロールできる際に、影を付けたい場合は「suggestiveShadow」の値をtrueに設定します。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます。",
    },
    suggestiveShadow: true,
  });
});

そうすると、スクロール前の段階では右側に影が付き、最後までスクロールし終えた段階では左側に影が表示されます。

See the Pen ScrollHint demo suggestiveShadow by E-VALUE WORKS (@evw) on CodePen.

scrollHintIconAppendClass：スクロールヒントアイコンに追加でクラス名を付与する

scrollHintIconAppendClassに好きな文字列を指定すると、アイコン箇所に追加でクラス名を付けることができます。

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます。",
    },
    scrollHintIconAppendClass: "scroll-hint-icon-white",
  });
});

一点、「scroll-hint-icon-white」というクラス名を付与した場合のみ、あらかじめScrollHint側で用意されているスタイルが適用され、背景色が白（アイコンとテキストは黒）になります。

See the Pen ScrollHint demo scrollHintIconAppendClass by E-VALUE WORKS (@evw) on CodePen.

自分で背景色を好きな色に変更したい場合は、任意のクラス名を追加し、そのクラスに対してCSSでスタイルを指定する必要があります。

■JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます。",
    },
    scrollHintIconAppendClass: "scroll-hint-icon-blue",
  });
});

■CSS

.scroll-hint-icon-blue {
  background-color: #18c1f0;
}

See the Pen ScrollHint demo scrollHintIconAppendClass② by E-VALUE WORKS (@evw) on CodePen.

まとめ

今回は、要素が横スクロール可能な状態になったタイミングを自動で検知し、ユーザーに「スクロールできます」というヒントを表示してくれるJSライブラリ「ScrollHint」の使い方を解説しました。

非常にシンプルで使いやすいライブラリですので、ぜひ活用してみてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

前の投稿へ
次の投稿へ

同じカテゴリーの記事を読む

HOMEお役立ちコラムJavaScriptScrollHintの使い方！横スクロールできる要素にヒントを表示する方法