ScrollHintの使い方【横スクロールテーブルにポインターアイコンを表示できるライブラリ】

ありさちゃん

テーブルが横スクロール可能であることを視覚的にアピールしたい…簡単にできる、おすすめの実装方法ないかな？

こんな疑問に答えます。

結論は、ScrollHintを使えばOKです。

とても簡単に実装できるので、さくっと終わらせてしまいましょう！

今回作ったのは以下のようなものです。

See the Pen Scroll-hint by samuraibrass (@samuraibrass) on CodePen.

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

ScrollHintとは？

ScrollHintは、ポインターアイコンを使用して、要素が横にスクロール可能であることを示唆するJavaScriptライブラリです​。

まさひろくん

ていうか、そもそもなぜ横スクロールできることが示唆できると良いのですか？

しょーご

ユーザーがスクロール可能であると気づかないと、重要な情報や機能を見逃す可能性があるからですね。

ScrollHintの使い方

❶テーブルを作る

まずはテーブルを作ります。

これでテーブルがレスポンシブで収縮しなくなるので、横スクロール可能になります。

<div class="scrollable-table js-scrollable">
    <table>
        <thead>
            <tr>
                <th>ヘッダ1</th>
                <th>ヘッダ2</th>
                <th>ヘッダ3</th>
                <th>ヘッダ4</th>
                <th>ヘッダ5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>データ1-1</td>
                <td>データ1-2</td>
                <td>データ1-3</td>
                <td>データ1-4</td>
                <td>データ1-5</td>
            </tr>
            <tr>
                <td>データ2-1</td>
                <td>データ2-2</td>
                <td>データ2-3</td>
                <td>データ2-4</td>
                <td>データ2-5</td>
            </tr>
            <tr>
                <td>データ3-1</td>
                <td>データ3-2</td>
                <td>データ3-3</td>
                <td>データ3-4</td>
                <td>データ3-5</td>
            </tr>
        </tbody>
    </table>
</div>

.scrollable-table {
  max-width: 100%;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  width: 800px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  width: 200px;
}

th {
  background-color: #f2f2f2;
}

❷ScrollHintを読み込む

読み込み方は大きく三種類です。

❶CDN（お手軽）

軽く利用するならCDNでいいでしょう。

</body>タグ手前などで読み込むといいでしょう。

<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

npmでも利用可能です。以下コードをターミナルに入力してください。

npm install scroll-hint --save

その後、JSファイルでimportすると、クラスが使えます（以下ではScrollHintという名前で使えます）

import ScrollHint from 'scroll-hint'

❸ダウンロード

普通にファイルをダウンロードして使うことも可能です。

その際は、以下のファイルだけを用いればOKです。

❸ScrollHintの設定をする

ScrollHintを発火させます。

ここでtableを内包しているdivのclass名を確認してください。今回はjs-scrollableと命名しています。

その場合、とりあえず以下コードをJSファイルに記述すればOKです。

new ScrollHint('.js-scrollable', {
      suggestiveShadow: true,
      i18n: {
          scrollable: 'スクロールできます'
      }
  });

しょーご

とりあえずこの設定を行うことが多いと思います。

その他のカスタマイズに関しては、以下にオプションの説明を日本語化したものを置いておきます。

ScrollHintのオプション一覧

ScrollHintでスクロール可能であることを明示しよう

テーブルは情報を簡潔にまとめるのに適した形態ですが、情報量が多くなったときに、特にスマホ時に改行が多くなり読みにくくなることがあります。

しかし、だからといって横スクロールを入れても、スクロールされずに伝えたいことが伝わらないこともままあります。

テーブルに重要な情報を乗せる場合こそ、横スクロール可能であることを明示してあげるのが親切だと思います。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

1. Figma,Photoshopデザインからのコーディング
2. サーバーアップロードでサイト公開
3. プロによる最大3回の表示確認特典
4. レビュー返しは爆速
5. 2024年にデザイン刷新！被らないポートフォリオ

「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル！！

他者と差をつけられるポートフォリオが準備できます！

しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます！

基本的に「まとめて購入」していただくとかなりお得になります↓

まとめて購入

全部盛りはこちらから
中級以上はこちらから
即戦力編はこちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！

＼課題の購入はこちらから／

課題の販売ページへ