スクロールヒント

1. 概要

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

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

2. 使用方法

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

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

3. オプション

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

オプション設定例

オプションを上書きする時の例になります。$.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,
      offset: 0,
      i18n: {
        scrollable: 'スクロールできます'
      }
    });
  });
</script>

アイコンの表示位置を調整する

Ver. 3.0.10 より、スクロール可能時に表示されるアイコンの表示位置を変更できるようになりました。Ver. 3.0.9 以前の 「Scroll Hint」ではアイコンが表示される位置が js-scroll-hint クラスが適用された要素の高さの半分がビューポートと交差した時でしたので、縦に長い表などで、表の上側の位置でアイコンを表示することができませんでした。

表示位置の変更方法は簡単で、scrollHintIconClass で設定したクラス（アイコン要素）のスタイルを変更して、表示したい位置に配置するだけです。アイコン要素がビューポートと交差した時にアイコン要素が表示されるようになります。デフォルトでは scrollHintIconClass は scroll-hint-icon となっているため、以下のようにCSSを変更すると、js-scroll-hint を適用した要素の上から 25% の位置でスクロール可能時に表示されるアイコンを表示します。

.scroll-hint-icon {
  top: 25%;
}