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

         

javascript

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

2018年10月23日 12:00 

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

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

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

▼前回の記事はこちら



 

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

スマートフォンで横長のコンテンツ(主にテーブルなど)を横スクロールさせて見せるテクニックは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.オプション一覧

オプション名 デフォルト 説明
suggestClass is-active 要素がスクロールインされたときに追加されるクラス名
scrollableClass is-scrollable 要素がスクロール可能なときに追加されるクラス名
scrollableRightClass is-right-scrollable 要素が右スクロール可能なときに追加されるクラス名
scrollableLeftClass is-left-scrollable 要素が左スクロール可能なときに追加されるクラス名
scrollHintClass scroll-hint 要素に追加するクラス名
scrollHintIconClass scroll-hint-icon アイコンに追加するクラス名
scrollHintIconAppendClass scroll-hint-icon-white 要素のアイコンに追加される別のクラス名
scrollHintIconWrapClass scroll-hint-icon-wrap アイコンのラッパーに追加されるクラス名
scrollHintText scroll-hint-text テキストに追加されるクラス名
remainingTime -1 スクロールヒントアイコンを非表示にするタイミング(ms)
scrollHintBorderWidth 10 要素のシャドーボックス境界線の幅
enableOverflowScrolling true iOSを使用していて、値がtrueの場合
suggestiveShadow false 要素がスクロール可能なときに示唆的な影を表示する
applyToParents false 親要素にJavaScriptを適用する
i18n.scrollable scrollable ここからスクロール可能なテキストを変更することができます

 

まとめ

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

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

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺