WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： プログラム >JavaScript

コンテンツがスクロールできるときにヒントを表示することができるScrollHintというJavaScriptライブラリをご紹介します。

作り方

さっそくScrollHintの使い方を紹介していきたいと思います。

1.CSSとJavaScriptを読み込みます。

CDNは下記になります。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fscroll-hint%40latest%2Fjs%2Fscroll-hint.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

ScrollHintのダウンロードはこちら

2.HTML の記述

HTMLの記述は下記になります。
tableの中は自由にカスタマイズしてください！
※js-scrollableというクラス名が必須です。

<div class="js-scrollable">

<table>
  
<tr>
    
<th></th>

    
<th>見出し</th>

    
<th>見出し</th>

  </tr>

  
<tr>
    
<th>見出し</th>

    
<td>内容</td>

    
<td>内容</td>

  </tr>

  
<tr>
    
<th>見出し</th>

    
<td>内容</td>

    
<td>内容</td>

  </tr>

</table>

</div>

3.Javascriptの記述方法

Javascriptの基本的な記述は下記になります。
その他にもオプションを付けることができます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20window.addEventListener('DOMContentLoaded'%2C%20function%20()%20%7B%0A%20%20%20%20new%20ScrollHint('.js-scrollable')%3B%0A%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

代表的なオプション

• remainingTime
• suggestiveShadow
• scrollHintBorderWidth
• i18n.scrollable
• scrollHintIconAppendClass

remainingTime

デフォルト:-1

詳細:アイコン非表示のタイミングを指定することができます。あまり使うことがないかもしれませんが、例えばこちらに「5000」という数値を設定すると5秒後にアイコンを消すことができます。
※ミリ秒での設定となります。
Javascriptの記述は下記となります。

  new ScrollHint('.js-scrollable', {
  remainingTime: '5000'
});

suggestiveShadow

デフォルト:false

trueにすると横スクロールしたときにテーブルの端にシャドウがつくようになります。
※背景色がついている場合は、設定することができません。

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true,
});

scrollHintBorderWidth

デフォルト:10

シャドウボックスの幅を指定することができます。初期値の「10」というのは、端から10pxスクロールしてシャドウを表示するかの設定となっています。

※この「scrollHintBorderWidth」は先ほど説明した「suggestiveShadow」がtrueになっていないと指定することができません。

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true,
  scrollHintBorderWidth:10,
});

i18n.scrollable

デフォルト:scrollable

スクロールのテキストを変更することができます。初期値が英語なので、基本的には、「スクロールできます」のような日本語に変えることが多いです。
Javascriptの記述は下記となります。

  new ScrollHint(".js-scrollable", {
    i18n: {
      scrollable: "スクロールできます",
    },
  });

scrollHintIconAppendClass

デフォルト:scroll-hint-icon-white

ヒントアイコンの背景色を白色にするという処理です。アイコンはCSSで色々設定がされているので、上書きをすれば、自由に書き換えることができます。

  new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white'
});

デモ

これまで説明した内容をまとめてみました。

See the Pen
コンテンツがスクロールできるときにヒントを表示するScrollHintの使い方！！ by いっちー (@cmmntlxl-the-bold)
on CodePen.

まとめ

今回はScrollHintというJavaScriptライブラリについて紹介しました。紹介した以外にも色々オプションがありますので、ぜひ調べて活用してみてください。