Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。

そんな時に使える横スクロールさせるエリアが出現した時に、アニメーション付きのアイコンを表示してそのエリアが横スクロールできることを視覚的に伝えてくれるJavaScript「ScrollHint」がとても活用できそうだったので自分用メモとしてご紹介します。

スマホ表示で横スクロールさせるエリアにアイコンを表示してくれるJavaScript「ScrollHint」


ScrollHint

この動作を実装させておくとページ内を上からスクロールした際に、横スクロールさせるエリアが出現した時点で、そのエリアの前面にアニメーション付きのアイコンを表示して、横スクロールができるということを視覚的に伝えてくれます。

実装もとても簡単で「scroll-hint.js」を読み込んで、対象要素に対して以下のように実行させれば実装できます。

◆SCRIPT
new ScrollHint('.js-scrollable', {
	scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
	applyToParents: true,
	i18n: {
		scrollable: 'スクロールできます'
	}
});

アイコンには簡単なテキストも表示することができ、実行スクリプト側で文言を指定することができます。

以上がスマホ表示でページ内に横スクロールエリアがある場合に、アニメーション付きのアイコンを表示してくれるJavaScript「ScrollHint」の紹介でした。

スマホ表示では横スクロールエリアにスクロールを出すことができず、この手の問題は開発者を悩ませることでもあるので、このUIで解消できる場面が多くなるのではないかと思います。

スマホで横スクロールエリアを実装する際にぜひ。。。