Web制作実務役立ち

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

ScrollHintの使い方【横スクロールテーブルにポインターアイコンを表示できるライブラリ】
本ページにはプロモーションが含まれています。

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

こんな疑問に答えます。

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

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

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

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

しょーご

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

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

ScrollHintとは?

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

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

まさひろくん

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

しょーご

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

ScrollHintの使い方

❶テーブルを作る

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

ScrollHintの使い方
  • tableを内包する要素(divなど)にJS用のclassを命名する(今回の場合js-scrollableと命名)
  • わざと横スクロールするように、テーブルに固定widthをつける

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

<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です。

  • scroll-hint.css
  • scroll-hint.min.js

❸ScrollHintの設定をする

ScrollHintを発火させます。

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

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

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

suggestiveShadowオプションをtrueに設定することで、スクロール可能であることを示唆する影を表示します。

i18nオプションは、異なる言語のメッセージを提供するためのもので、ここでは「スクロールできます」という日本語のメッセージを設定しています。

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

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

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

ScrollHintのオプション一覧

NameDefault説明
suggestClassis-active要素がスクロールインされた際に追加されるクラス名
scrollableClassis-scrollable要素がスクロール可能の際に追加されるクラス名
scrollableRightClassis-right-scrollable要素が右にスクロール可能の際に追加されるクラス名
scrollableLeftClassis-left-scrollable要素が左にスクロール可能の際に追加されるクラス名
scrollHintClassscroll-hint要素に追加されるクラス名
scrollHintIconClassscroll-hint-iconアイコンに追加されるクラス名
scrollHintIconAppendClassscroll-hint-icon-white要素のアイコンに追加される別のクラス名
scrollHintIconWrapClassscroll-hint-icon-wrapアイコンのラッパーに追加されるクラス名
scrollHintTextscroll-hint-textテキストに追加されるクラス名
remainingTime-1scroll-hint アイコンを隠すまでの時間 (ミリ秒)
scrollHintBorderWidth10要素のシャドウボックスのボーダー幅
enableOverflowScrollingtrueiOSを使用しており、この値がtrueの場合、要素に-webkit-overflow-scrollingプロパティが追加される
suggestiveShadowfalse要素がスクロール可能の場合、示唆的な影を表示する
applyToParentsfalse親要素にJavaScriptを適用する
offset0スクロール可能の基準を変更できる
i18n.scrollablescrollableここからスクロール可能なテキストを変更できる

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

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

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

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

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

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

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

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

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

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

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

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

コーディング課題 中級 中級Ex
しょーご

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

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

コーディング課題
まとめて購入

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

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!