こんにちは。すずきです。
この記事ではスクロール可能な要素にヒントを表示するプラグイン「ScrollHint」について解説します。
- 横スクロールできることを伝える方法がわからずない
- ScrollHintの使い方がわからない
- スクロールヒントの細かい設定方法がわからない
ScrollHintとは
ScrollHintは、スクロール操作を支援するJavaScriptライブラリです。
ScrollHintを使用することで、スクロールできることを伝えるアニメーションを表示することができます。
これによりユーザー体験を向上することができます。
ScrollHintを使うメリット
ScrollHintを使用することで以下のようなメリットがあります。
- スクロール可能なことがユーザーに伝わりやすいため、ユーザー体験が向上
- オプションにが豊富なため、Webページに合わせたカスタマイズが可能
- ScrollHintはサイズが軽量なので、サイトのパフォーマンスにも影響を与えずに利用することができる
ScrollHintを使用することで、ヒントの簡単な実装によるユーザー体験の向上、webページに合わせたカスタマイズを表示スピードを落とさず簡単に実装することができます。
ScrollHintの使い方
実際にScrollHintを使用する場合の導入方法を紹介します。
必要ファイルをを読み込む
まずはHTML
内でscroll-hint.css
scroll-hint.min.js
を読み込みます。
各ファイルの読み込み方法は以下の2つがあります。
- ファイルをダウンロードし、ディレクトリ内で読み込む
- CDNで読み込む
公式ページからダウンロードが可能で、CDNリンクも記載されています。
CDNの場合は下記コードで読み込むことができます。
<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>
ScrollHintを初期化する
次に、JavaScriptでScrollHintを初期化します。以下のコードを記述してください。
<script>
new ScrollHint('.js-scrollable');
</script>
.js-scrollable
の部分はHTMLに記述するクラス名になりますので適宜変更してください。
HTMLの表示する要素にクラスを指定する
最後にヒントを表示する要素に先ほど指定したクラスを指定します。
今回の場合、.js-scrollable
になります。
<div class="table__container js-scrollable">
<table>
<tr>
<th>タイトル1</th>
<td>テキスト1</td>
<td>テキスト2</td>
・
・
・
<td>テキスト9</td>
<td>テキスト10</td>
</tr>
</table>
</div>
これでScrollHintを表示することができます。
実際に制作したデモが以下になります。
See the Pen ScrollHint実装デモ by すずき (@k-suzuki3533) on CodePen.
ScrollHintのオプション
ScrollHintには様々なオプションが用意されています。
以下が用意されているオプションになります。
名前 | デフォルト | 説明 |
---|---|---|
suggestClass | is-active | 要素がスクロールインされたときに追加されるクラス名 |
scrollableClass | is-scrollable | 要素がスクロール可能な場合に追加されるクラス名 |
scrollableRightClass | is-right-scrollable | 要素が右スクロール可能の場合に追加されるクラス名 |
scrollableLeftClass | is-left-scrollable | 要素が左スクロール可能の場合に追加されるクラス名 |
scrollHintClass | scroll-hint | 要素に追加するクラス名 |
scrollHintIconClass | scroll-hint-icon | アイコンに追加するクラス名 |
scrollHintIconAppendClass | scroll-hint-icon-white | 要素のアイコンに追加する別のクラス名 |
scrollHintIconWrapClass | scroll-hint-icon-wrap | アイコンのラッパーに追加するクラス名 |
scrollHintText | scroll-hint-text | テキストに追加するクラス名 |
remainingTime | -1 | スクロール ヒント アイコンを非表示にするタイミング (ミリ秒) |
scrollHintBorderWidth | 10 | 要素のシャドーボックスの境界幅 |
enableOverflowScrolling | true | iOS を使用し、値が true の場合、 要素に -webkit-overflow-scrolling プロパティが追加されます |
suggestiveShadow | false | 要素がスクロール可能な場合、暗示的な影を表示する |
applyToParents | false | JavaScript を親要素に適用する |
offset | 0 | スクロール可能の基準を変更できます。 |
i18n.scrollable | scrollable | ここからスクロール可能なテキストを変更できます |
デフォルトではテキストが英語で表記されるので、日本語に直す必要があります。
自分は使用する時、主にこちらのカスタマイズで使用しています。
<script>
new ScrollHint(".js-scrollable", {
i18n: {
scrollable: "スクロールできます",
},
});
</script>
終わりに
ScrollHintは、スクロール表示をサポートする便利なライブラリです。
表示スピードを落とさず、ユーザー体験を向上させることができます。
また、オプションも豊富なので、制作するwebサイトに合わせてカスタマイズが可能です。
<table>
タグでスクロールする場合、端の列や行を固定することで更にユーザーが見やすいサイトを制作することが可能です。
こちらの記事で詳しい内容を紹介しています。
ぜひ使用してみてください。
私がよく使うプラグインを以下記事でまとめています。
よければ参考にしてください。