今更ですが新年あけましておめでとうございます！
絶賛本厄中の松崎ですがお互い良い1年にしましょう！
ちゃんと厄払い行って、鰻食べてきたので準備はバッチリです！
今回は、横スクロール可能な要素にヒントを表示するjsライブラリ、
その名も「ScrollHint」をご紹介します。
横スクロールできるか視覚的に分かりやすくユーザビリティ向上にもつながります。
百問は一見に如かず、とういことで実際導入したものを用意しました！
| Col1 | Col2 | Col3 | Col1 | Col2 | Col3 |
|---|---|---|---|---|---|
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
ひと目で横スクロールできる要素と分かりますね！素敵です。
導入方法
下記URLから「ScrollHint」をダウンロード！
https://appleple.github.io/scroll-hint/
ダウンロードできたらhead内に「scroll-hint.css」を
body閉じタグの直前に「scroll-hint.min.js」を読込んでください！
<link rel=”stylesheet” href=”./css/scroll-hint.css”>
<script src=”./js/scroll-hint.min.js”></script>
<script src=”./js/scroll-hint.min.js”></script>
横スクロール可能な要素に任意でクラスを付与。
今回は「js-scrollable」にしてます。
<div class=”js-scrollable”>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
</div>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
</div>
あとは、オプションを設定してあげるだけ。
デフォルトは英語なので、日本語にしてます。
new ScrollHint(“.js-scrollable”, {
i18n: {
scrollable: “横スクロール”,
},
});
i18n: {
scrollable: “横スクロール”,
},
});
オプション
いろいろとオプションも追加できるので独断と偏見でよく使うものをご紹介します。
new ScrollHint(“.js-scrollable”, {
scrollHintIconAppendClass: ‘scroll-hint-icon-white’, ←背景を白にできる
suggestiveShadow: true, ←影をつける
remainingTime: 3000, ←3秒後に非表示
i18n: {
scrollable: “横スクロール”, ←テキスト変更
},
});
scrollHintIconAppendClass: ‘scroll-hint-icon-white’, ←背景を白にできる
suggestiveShadow: true, ←影をつける
remainingTime: 3000, ←3秒後に非表示
i18n: {
scrollable: “横スクロール”, ←テキスト変更
},
});
実際、オプション設定したものがこちらになります！
1.2.3.
| Col1 | Col2 | Col3 | Col1 | Col2 | Col3 |
|---|---|---|---|---|---|
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
| Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
おわりに
「ScrollHint」を導入するだけで気づかず情報を見逃してしまうリスクを減らすことができます。
簡単に導入できるのでお試しください！
難しければるーぷがサポートするのでお気軽にお申し付けください！
本年もよろしくお願いします！
PREV