レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。

無思慮な状態だとページ全体が押し広げられ、想定しないところに横スクロールが発生する。このことを考慮して、対象エリアにのみ横スクロールするようなスタイルを当てるのが一般的であろう。

それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、table要素はただただ見切れているように認識され兼ねないわけだ。伝えたいことが見逃されるのは大変不利益になる。

そんな事案に最適なライブラリがある。

このエントリーでは、バナー通知で横スクロールできることを促すJavaScriptライブラリ「scroll-hint」を紹介したい。

ScrollHint について

ScrollHintは、ポインターアイコンのバナーを表示して、スクロールできることを通知してくれるJavaScriptライブラリだ。

https://appleple.github.io/scroll-hint/

特徴

• ライブラリに依存しない
• Vanilla JSで極めて軽量

導入

まず入手方法は、次の3つから都合のよいものを選んでほしい。

• npm or yarn
• CDN
• Download

npm or yarn

$ npm install scroll-hint --save
# or
$ yarn add scroll-hint

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>

Download

https://appleple.github.io/scroll-hint/

設置・実行

以下例はバンドラー環境下を想定している。CDNにて読み込んだ場合は、import文は不要だ。

import ScrollHint from 'scroll-hint';
​
new ScrollHint('.js-scrollable');

設定

Name	Default	hint
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	scrollable	テキストを変更する

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true,
  i18n: {
    scrollable: 'スクロールできます'
  }
});

まとめ

バナー通知で横スクロールできることを促すJavaScriptライブラリ「scroll-hint」の紹介だった。

レスポンシブデザインがPCファーストで作られていて、モバイルデザインが疎かだったり欠如していたりするような場合、コーディングを経て、表レイアウトの問題点を認識するということも少なくない。これではレイアウトのやり直しやセルのサイズ調整を指摘されて後手に回るようなことが懸念される。

それならば、当該ライブラリの実装提案は有効に働くかもしれない。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。