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で解消できる場面が多くなるのではないかと思います。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

スマホ表示で横スクロールがある場合にアイコンを表示してくれるJavaScript「ScrollHint」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner