デザイナーのオッコです。
どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。
でもぱっと見て「横スクロールができる」とユーザーに分からせるUIを作るのは案外難しいです。
そこで、指マークが出てくれるプラグイン「scroll-hint」の導入方法をご紹介します。
scroll-hintを自サイトへ導入する
パッケージを公式サイトからダウンロードしたら、以下2ファイルを使います。
・scroll-hint.css
・scroll-hint.min.js
①<head>タグの中でcssファイルを呼び出します。
②<body>の閉じタグの直前で以下の処理を書きます。
<!-- ScrollHint -->
<script src="/ディレクトリパス/scroll-hint.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
new ScrollHint('.js-scrollable', {
i18n: {
scrollable: 'スクロールできます'
}
});
});
</script>
<!--/ScrollHint -->③指アイコンを出したいコンテンツのクラスにjs-scrollableを追記します。
これだけで動きます！
処理のポイントとハマりやすい点
ポイントは、wondow.onloadではなく、addEventListenerを使っていること！
onload処理はよく使われがちですが、2回使われると最後に走った方の処理で上書きされるという仕様があります。
なので不具合を避けるためにaddEventListenerを使いましょう。
ハマりやすい点は以下です。
・ディレクトリパスが正しくない
└私はcssのURLの頭に/をつけていなかったうっかりミスのせいで、1時間くらい無駄にしました。
・js-scrollableクラスを付ける場所が正しくない
└元が複雑なタグ構造になってしまっている場合はいろんな場所をとりあえず試すのが時短につながります。
・css、jsを適切な位置に書いていない
└cssがhead以外に書かれていたり、jsを書く位置が違ったり。
jsは順序が大事ですし、上に書いても動きますが処理の遅延につながるのでなるべく避けたいところ。
以上になります。
指スクロールアイコンは視覚的にもとても分かりやすいので、これからも使っていこうと思います！
参考サイト：
横スクロールのある要素にヒントを表示するjsプラグイン「scroll-hint.js」の使い方
【ScrollHintの使い方】横スクロール可能なコンテンツに「ヒント」を表示するJSライブラリ
関連記事紹介
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら↓
ITツール紹介ページはこちら↓
