横スクロールを知らせるUI

1. 概要

スマホなどの小さいディスプレイの時に、横に長いコンテンツ(テーブルなど)を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくくUIとして悩むところです。

そこで、この組み込みJS「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。

Col1 Col2 Col3 Col4
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips. Tips.

2. 使用方法

横スクロールするコンテンツの親要素に js-scroll-hint をclass属性として適用します。

<div class="js-scroll-hint">
  <table class="acms-table" style="white-space: nowrap;">
    ...
  </table>
</div>

3. オプション

オプションは js/config.js で設定されています。



項目名 詳細 デフォルト値
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
scrollHintBorderWidth シャドーが有効場合のシャドーの幅を指定します。 10
enableOverflowScrolling iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。 true
suggestiveShadow 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。 false
applyToParents 指定されたセレクターの親要素に対してJavaScriptが実行されます。 false
i18n.scrollable スクロールのメッセージを変更できます。 スクロールできます

オプション設定例

オプションを上書きする時の例になります。$.extend を使用して部分的に書き換えれるようになっています。

<script>
  ACMS.Ready(function() {
    ACMS.Config.scrollHintConfig = $.extend(ACMS.Config.scrollHintConfig, {
      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,
      scrollHintBorderWidth: 10,
      enableOverflowScrolling: true,
      suggestiveShadow: false,
      applyToParents: false,
      i18n: {
        scrollable: 'スクロールできます'
      }
    });
  });
</script>