【ライブラリで簡単】横スクロール可能なアイコンを表示する【ScrollHint】

Web制作で、スマホなど画面幅を小さくした時に、テーブルで作成した横長の表などを横スクロールできるようにすることがありますよね。

overflow-x: scroll;　を指定してスクロールさせれば解決ではあるのですが、表などのコンテンツデザインによっては、そもそもスクロールできるデザインなのか見分けがつきにくいことがあります。

そんな時、横スクロールできるコンテンツには、以下の画像のように「スクロールできるよ！」というヒントをアイコンで表示すると、ユーザーに親切なサイトになります。

ScrollHintというライブラリで簡単に実装できるので、この記事を参考にサクッと実装してみてください！

CODE PENにScrollHintを実装してみました。

表が画面幅を超えてしまったら、人差し指アイコンと「横スクロール可能です」というテキストが表示されています。

(必要に応じて画面幅を伸縮してみてください)

See the Pen 横スクロール可能なアイコンを表示するScrollHint.js by Sugar (@ms_da_13) on CodePen.

横スクロールできる箇所が明確になっていいですよね。

では、実装する手順をご紹介していきます！

まずは、ScrollHintを入手してサイトに設置しましょう。方法は3つあります。

CDNでScrollHintのcssとjsを読み込みます。

以下のコードをheadタグ内か、bodyタグの終了直前(</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 install scroll-hint --save

その後、JSファイルで以下のコードでimportしましょう。

import ScrollHint from 'scroll-hint'

これで、npmでインストールした外部のファイルを使用できるようになりました。

①、②以外の方法として、公式サイトからCSSとJSファイルをダウンロードするこもできます。

公式サイトにアクセスしたら、以下の画像の赤枠ボタンをクリックして「scroll-hint-master.zip」をダウンロードしましょう。

ダウンロードしたファイルを解凍し、中にある以下の2つのファイルだけ使用します。

• scroll-hint.css
  ファイルの場所：scroll-hint-master → css → scroll-hint.css
• scroll-hint.min.js
  ファイルの場所：scroll-hint-master → js → scroll-hint.min.js

それぞれのファイルは、通常のCSSファイルやJSファイルと同じ場所に格納してheadタグ内やbodyタグ終了直前で読み込みましょう。

ScrollHintのCSSとJSファイルを入手して読み込む準備ができたら、次は動かしてアイコンを表示させましょう。

行う作業は以下の2つだけです。

• HTMLを作成
• JavaScriptを記述

サンプルで作成したHTMLとCSSは以下のとおりです。

<div class="sample-table js-scrollable">
  <table>
    <thead>
      <tr>
        <th>商品A</th>
        <th>商品B</th>
        <th>商品C</th>
        <th>商品D</th>
        <th>商品E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
      </tr>
      <tr>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
      </tr>
      <tr>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
        <td>サンプルテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

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

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

th, td {
  border: 1px solid #222;
  padding: 10px 15px;
  width: 200px;
}

th {
  background-color: #ddd;
}

このあたりは実際に制作するサイトによって構造などがもちろん変わりますが、2つポイントがあります。

tableタグを囲む要素に付与するクラス名は.js-scrollableでなくても構いません。

後述するJavaScriptとクラス名を合わせる必要があるので、そこだけ注意してください。

.js-scrollableに囲まれたtableには、わざと固定幅を持たせることによって、画面幅が狭くなった時にはみ出すことになり、後述するJavaScriptが発火して横スクロールを示すアイコンが表示されます。

HTMLとCSSが準備できたら、あとはJavaScriptですが、基本的には以下のコードをコピペでOKです。

tableタグを囲んでいる要素に付けたクラス名を.js-scrollableから変えている場合は、JavaScript内の記述もそのクラス名に合わせて書き換えてください。

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true, //スクロール可能な要素右端に影を付ける
  i18n: {
    scrollable: '横スクロール可能です' //表示するテキスト
  }
});

上記コードのsuggestiveShadow: true,部分は、以下の画像のように、スクロールできる要素の右端に影が付くようになり、より視覚的に分かりやすくなるのでオススメです。

scrollable: '横スクロール可能です'の日本語テキスト部分は自由に書き換え可能です。

基本的にはここまでの設定だけで十分使用できるかと思いますが、ScrollHintにはオプションが複数用意されています。

スクロールできる要素の右端に影を付けたり、テキストを変えるのも、実はオプションです。

他のオプションを使用して、カスタマイズした例をご紹介します。

アイコンが消えるまでの時間を調整するオプションです。

remainingTime: 5000, //例として5000を指定＝5秒間アイコンを表示 (初期値は-1)

See the Pen 横スクロール可能なアイコンを表示するScrollHint.js by Sugar (@ms_da_13) on CodePen.

アイコンの色を変更するオプションです。試しに白にしてみました。

scrollHintIconAppendClass: 'scroll-hint-icon-white',//アイコンの背景を白に変更

See the Pen ScrollHint.jsのオプション「ヒントアイコンの表示時間調整」 by Sugar (@ms_da_13) on CodePen.

ScrollHintには様々なオプションがあります。以下はその一覧です。

ただ、基本的にはオプションを指定しなくても十分使用できるかと思います。

公式サイトにも英文でオプションが記載されています。

ScrollHint.js公式サイト
https://appleple.github.io/scroll-hint/

ScrollHint.jsが無くてもサイトは制作できますが、ただ制作するだけではなくて、いかにユーザーにとって便利になるかを考えると、ScrollHint.jsを導入した方が親切ですよね。

クライアントから導入の指示が無くても、こちらから実装を提案できると良いですね。