ScrollHintは、スマホやタブレットの場合に、横にはみ出したテーブルを横スクロール可能にし、横スクロールができることを視覚的にわかるように教えてくれるスクリプトです。
デモは以下ページで確認できますので、スマホやタブレットでアクセスしてみてください。
ScrollHintの使い方
ステップ1. ScrollHintのCSSとスクリプトの読み込み
まずは、ScrollHintのCSSとスクリプトをサイトに読み込みましょう。以下を<head>～</head>に追加します。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.2/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js"></script>
GitHubからファイルをダウンロードして、サーバーに設置して読み込んでもOKです。
ステップ2. テーブルをdiv要素で内包
横スクロールさせたいテーブルをdiv要素で内包します。
<div class="js-scrollable">
<table>
<thead>
<tr>
<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>
</tr>
</tbody>
</table>
</div>
div要素のクラス名は.js-scrollableとしていますが、任意のクラス名で大丈夫です。
ステップ3. ScrollHintの実行
最後にScrollHintを実行します。</body>の直前等に以下を追加してください。
<script>
new ScrollHint('.js-scrollable');
</script>
.js-scrollableの部分は、テーブルを内包するdiv要素で指定したクラス名を指定します。
ScrollHintのオプションも指定する場合は、以下のように記述します。
<script>
new ScrollHint('.js-scrollable', {
scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
applyToParents: true,
i18n: {
scrollable: 'スクロールできます'
}
});
</script>
用意されているオプションは以下の通りです。
| Name | Default | Description |
|---|---|---|
suggestClass |
is-active | Classname to be added when the element is scrolled-in |
scrollableClass |
is-scrollable | Classname to be added when the element is scrollable |
scrollableRightClass |
is-right-scrollable | Classname to be added when the element is right-scrollable |
scrollableLeftClass |
is-left-scrollable | Classname to be added when the element is left-scrollable |
scrollHintClass |
scroll-hint | Classname to be added to the element |
scrollHintIconClass |
scroll-hint-icon | Classname to be added to the icon |
scrollHintIconAppendClass |
scroll-hint-icon-white | Another classname to be added to the element’s icon |
scrollHintIconWrapClass |
scroll-hint-icon-wrap | Classname to be added to the icon’s wrapper |
scrollHintText |
scroll-hint-text | Classname to be added to the text |
remainingTime |
-1 | When to hide scroll-hint icon (ms) |
scrollHintBorderWidth |
10 | Shadowbox border width of the element |
enableOverflowScrolling |
true | When using iOS and the value is true, -webkit-overflow-scrolling property will be added to the element |
suggestiveShadow |
false | Show suggestive shadow, when the element is scrollable |
applyToParents |
false | Apply JavaScript to the parent element |
i18n.scrollable |
scrollable | You can change the scrollable text from here |
あとがき
サイトのUI・UX的にもわかりやすくなりますね。
横スクロールできることを明示しなくてもいいから、CSSのみでテーブルの横スクロールを実装したいという場合は、「レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法」をご参照ください。