【ScrollHintの使い方】横スクロール可能なコンテンツに「ヒント」を表示するJSライブラリ

悩んでいる人

スマホのときにテーブルの表示を横スクロールにしたけど、スクロールできるのかどうかパッと見でわからないの…なんかいい方法ないかな？

本記事では、上記の悩みを解決します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

今回のゴール

横スクロール可能なコンテンツ（今回はテーブル）に下記のように「スクロールできます」という表示をさせる

さきにどんなコードで実装しているのか確認したい方向けに実際のコード貼っておきます。

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

ScrollHintの導入方法

ScrollHintを導入する方法は3つあります。

どれを使っても最終的に同じ実装ができるので、ご自身の使いやすいものや案件に合わせて導入方法は選択ください。

CDNを利用する

headタグ内に下記を記述することで使えるようになります。

<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, yarnでインストールする

npmかyarnを使用して、下記コマンドでインストール可能です。

//npm
npm install scroll-hint --save

//yarn
yarn add scroll-hint

ファイルをダウンロードする

公式サイトのダウンロードボタンからファイルをダウンロードします。

CSSフォルダ → scroll-hint.css
jsフォルダ→ scrollhint.js

して、HTML上で読み込みます。

ScrollHintの使い方

HTMLとJavaScriptをに分けて見ていきます。

HTML

<div class="table__inner js-table-scroll-hint">
  <table>
    <tr>
      <th></th>
      <th>日本</th>
      <th>アメリカ</th>
      <th>中国</th>
      <th>タンザニア</th>
    </tr>

    //省略
    
　　<tr>
      <th>挨拶</th>
      <th>こんにちは</th>
      <th>ハロー</th>
      <th>ニーハオ</th>
      <th>ジャンボ</th>
    </tr>
  </table>
</div>

ポイントは、tableタグをdivタグで囲み、JavaScriptを発火させるためのクラスを付与します。

ここでは、js-table-scroll-hintというクラスを付与しております。

JavaScript

JavaScriptでは以下のように、記述します。

  new ScrollHint(".js-table-scroll-hint");

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

オプション一覧

よく使うものには★をつけてあります。

オプションの記述例になります。

new ScrollHint(".js-table-scroll-hint", {
 suggestiveShadow: true,
 remainingTime: 5000,
 i18n: {
  scrollable: "スクロールできます"
 }
});

最後に、再度実装したものを貼っておきますのでもしわからなくなったときにはこちらを参考に実装してみてください^^

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

まとめ

横スクロールできるコンテンツに対して、ヒントを与えてくれる親切なJavaScriptライブリを紹介しました！

テーブルとかで結構横スクロールさせることが多いとおもうのですが、是非こちらを使ってあげてユーザーが使いやすいサイト・ストアをつくってみてください！