スクロールヒント
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 で設定されています。
| 項目名 | 詳細 | デフォルト値 |
|---|---|---|
| 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 |
| offset | アイコンが表示されるのに必要なスクロール量（どれくらいスクロールできる場合にアイコンを表示するのか）を数値（単位はpx）で指定します。 | 0 |
| 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,
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%;
}