【JSプラグイン】scroll-hintの使い方
テーブルなどをスマホの時にスクロールさせるプラグインです。
読み込む
<!-- head内 -->
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<!-- body下 -->
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>使う
スクロールさせたい要素はたいていテーブルなので、テーブルの例。
ここでは対象を「scrollable」というdivで囲みます。
<div class="scrollable">
<table class="defa">
<tbody>
<tr>
<th>日付</th>
<td>タイトル</td>
</tr>
<tr>
<th>日付</th>
<td>タイトル</td>
</tr>
</tbody>
</table>
</div>scrollableに囲まれてる時は大きいテーブルでもいいよみたいなことを書きます。
/* scrollable */
.scrollable table {
min-width: max-content;
}
.scrollable table th,
.scrollable table td {
white-space:nowrap;
}プラグインを呼び出します。
window.onload = function () {
new ScrollHint('.scrollable', {
i18n: {
scrollable: 'スクロールできます'
}
});
}参考
- ScrollHint
https://appleple.github.io/scroll-hint/