• ホーム
  • テクノロジー
  • アニメーションアイコンで横スクロールすることを案内するJavaScriptライブラリ「scroll-hint」の使い方

アニメーションアイコンで横スクロールすることを案内するJavaScriptライブラリ「scroll-hint」の使い方

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

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

それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、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');

設定

NameDefaulthint
suggestClassis-activeスクロールされたとき追加されるクラス
scrollableClassis-scrollableスクロール可能なとき追加されるクラス
scrollableRightClassis-right-scrollable右へスクロール可能なとき追加されるクラス
scrollableLeftClassis-left-scrollable左へスクロール可能なとき追加されるクラス
scrollHintClassscroll-hintターゲット要素に付与されるクラス
scrollHintIconClassscroll-hint-icon通知要素に付与されるクラス
scrollHintIconAppendClassscroll-hint-icon-white通知要素に付与されるクラス
scrollHintIconWrapClassscroll-hint-icon-wrap梱包要素に付与されるクラス
scrollHintTextscroll-hint-textテキストに付与されるクラス
remainingTime-1非表示にする(ミリ秒)
scrollHintBorderWidth10影の幅
enableOverflowScrollingtrue慣性スクロールにする
suggestiveShadowfalseスクロール可能な場合、影を表示する
applyToParentsfalse親要素に適用する
i18n.scrollablescrollableテキストを変更する
new ScrollHint('.js-scrollable', {
  suggestiveShadow: true,
  i18n: {
    scrollable: 'スクロールできます'
  }
});

まとめ

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。*がついている欄は必須項目です。

日本語が含まれない投稿は無視されますのでご注意ください。