レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。
無思慮な状態だとページ全体が押し広げられ、想定しないところに横スクロールが発生する。このことを考慮して、対象エリアにのみ横スクロールするようなスタイルを当てるのが一般的であろう。
それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、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-hintCDN
<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ファーストで作られていて、モバイルデザインが疎かだったり欠如していたりするような場合、コーディングを経て、表レイアウトの問題点を認識するということも少なくない。これではレイアウトのやり直しやセルのサイズ調整を指摘されて後手に回るようなことが懸念される。
それならば、当該ライブラリの実装提案は有効に働くかもしれない。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
