Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。
そんな時に使える横スクロールさせるエリアが出現した時に、アニメーション付きのアイコンを表示してそのエリアが横スクロールできることを視覚的に伝えてくれるJavaScript「ScrollHint」がとても活用できそうだったので自分用メモとしてご紹介します。
スマホ表示で横スクロールさせるエリアにアイコンを表示してくれるJavaScript「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で解消できる場面が多くなるのではないかと思います。
スマホで横スクロールエリアを実装する際にぜひ。。。