スマホで横スクロールコンテンツにアイコンを表示してくれる「ScrollHint」

こんにちは！社員Aです👩

以前、「たった2行で実装できるスマートフォンでテーブルを横スクロールさせる方法」という記事を書いたのですが、今回はこの横スクロールコンテンツにアイコンを表示してくれるライブラリ「ScrollHint」をご紹介します！

▼前回の記事はこちら

ゆにメモ

 

1 Pocket

スマートフォンでテーブルを横スクロールさせる方法【CSS2行！】

https://blog.universe-web.jp/1385

こんにちは！最近はデザインとコーディングのスケジュールが交互に入っていて、バランスよく仕事ができている社員Aです👩デザインをずっとやっていると、「そろそろコーディングやりたいな」と恋しくなるし、逆もしかりなのです（笑）ここにたまにLP制作の案件が入ってくると、もっとバランスよくなります。どちらも均等にレベルアップさせていきたいので、今みたいなバランスが一番合っている気がします。さて、今回は「スマートフォンでテーブルを横スクロールさせる方法」をご紹介します。料金表やプランなどPCでは見やすい...

ユーザビリティー向上！横スクロールコンテンツにアイコンを表示

スマートフォンで横長のコンテンツ（主にテーブルなど）を横スクロールさせて見せるテクニックはWEB業界では定番のやり方ですが、横スクロールできることがユーザーに認知されない場合があります。

そんな時に使えるのが、今回ご紹介するライブラリ「ScrollHint」です。

下記が「ScrollHint」で実装されたデモ画像ですが、実際に横スクロールできることをアイコンを使って表示してくれるので、横スクロールの存在を知らなくても指を左右に動かすことで全体が見られることを認知させることができます。

「ScrollHint」のインストールから導入まで

ここからは便利なライブラリ「ScrollHint」のインストールからサイトへの導入までの流れを説明していきたいと思います。

1.CDNもしくはインストールしてサイトに導入

「ScrollHint」は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>

◆インストールして使用する場合

公式サイトからダウンロード

2.横スクロールさせたいコンテンツを任意のクラスで囲む

サイトに導入しましたら、「ScrollHint」を実際に実装します。

まずは、横スクロールさせたいコンテンツをdiv などで囲います。

今回は、テーブルを 「js-scrollable」のクラスで囲います。

<div class="js-scrollable">
  <table>
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
        </tr>
      </tbody>
    </table>
</div>

3.scriptを記述

続けてscriptを記述します。

new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
  applyToParents: true,
  i18n: {
    scrollable: 'スクロールできます'
  }
});

1. 1行目の「.js-scrollable」は先程横スクロールさせたいコンテンツを囲んだ大枠のクラス名を入力します。
2. 5行目のscrollableの部分には、アイコンとともに表示させたい文言を入力します。

その他にもオプションがありますので、下記を参照してください。

4.オプション一覧

まとめ

簡単に、横スクロールコンテンツにアイコンを表示することができるライブラリ「ScrollHint」をご紹介しました。

ユーザビリティー向上のためにも、アイコンが合ったほうがわかりやすいですね！