ScrollHintの使い方
スマホサイズやタブレットサイズなどでテーブルを作る時に収まり切らず、横スクロールさせることもあります。
ただ、そういった場合だとユーザーが横スクロールできる場所だと気づかずスルーされる場合もあります。
今回は横スクロールができる箇所に指のアイコンが出てくるJavaScriptのライブラリを紹介します。
このライブラリを使用するとユーザーの見ずらい・わかりづらいという悩みが解消されます。
ScrollHintの導入方法
今回はScrollHintの導入方法を二つ紹介します。
- CDNを使った導入方法
- 公式サイトからファイルをダウンロードする導入方法
一つずつ解説していきます。
CDNを使った導入方法
最初はCDNを使った導入方法です。
下のコードをheadタグ内に記述します。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
CDNを使った導入方法はこちらで完了です。一番簡単だと思います。
公式サイトからファイルをダウンロードする導入方法
次に公式サイトからファイルをダウンロードする導入方法です。
まず、公式サイトにアクセスします。
https://appleple.github.io/scroll-hint/
公式サイトの「Download」をクリックします。
ダウンロードしたscroll-hint-masterというファイルの中のcssファイルとjsファイルのみを使います。
cssファイルとjsファイルを読み込むためにhead内に下のコードを記述します。
<link rel="stylesheet" href="./assets/css/scroll-hint.css"> <script type="text/javascript" src="./assets/js/scroll-hint.min.js" defer></script>
これで公式サイトからファイルをダウンロードする導入方法は完了です。
ScrollHintの使い方
今回はCDNを使った導入方法を使ってデモと一緒に説明していきたいと思います。
まずhead内に下のコードをコピペします。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
スクロールさせたいテーブルをdivで囲んでクラス名をつけます。
今回は「tablearea」というクラス名をつけます。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<style>
header {
top: 0;
z-index: 2;
}
.tablearea {
max-width: 60%;
margin: 60px auto 0;
overflow: auto;
}
.tablearea table {
color: #000;
border-collapse: collapse;
}
th,
td {
padding: 30px;
border: 1px solid #000;
white-space: nowrap;
}
.scroll-hint-text {
margin-top: 0;
}
</style>
</head>
<body>
<main>
<div class="tablearea">
<table>
<tr>
<th>見出し</th>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
<tr>
<th>見出し</th>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
<tr>
<th>見出し</th>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
<tr>
<th>見出し</th>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
<tr>
<th>見出し</th>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
</table>
</div>
</main>
<script>
new ScrollHint('.tablearea');
</script>
</body>
</html>次にJavaScriptにしたのコードを記述します。
new ScrollHint(".scrollarea");これでスクロールのヒントが表示される様になりました。
デモサイトは こちら になります。
もちろんこれだけではなく、様々なカスタムができたりもします。
その中でもよく使うオプションの5つを紹介します。
i18n.scrollable
初期値：scrollable
アイコン下に表示される文字を変更できます。
scrollHintBorderWidth
初期値：10
シャドウの幅を指定できます。
remainingTime
初期値：-1
アイコン非表示のタイミング（ms）
suggestiveShadow
初期値：false(表示しない)
要素の端にシャドウを追加できます。※背景色を指定している場合は使用できないので注意
scrollHintIconAppendClass
初期値：scroll-hint-icon-white
ヒントアイコンを白色に
記述例はこの様になります。
new ScrollHint(".tablearea", {
suggestiveShadow: true,
scrollHintBorderWidth: 1000,
remainingTime: 5000,
i18n: {
scrollable: "スクロールできます"
}
});このコードの場合はこの様な表示がされます。
デモサイトは こちら になります。
まとめ
今回は
- 導入方法（CDN・ファイルのダウンロード）
- ScrollHintの使い方
を紹介しました。
自分でもやってみてとても簡単にできてみやすいので、ぜひ皆さんもScrollHintを使ってみてはいかがでしょうか。
