【jQuery】横スクロールする際のヒントを表示、ScrollHintの使い方!

シュウ

今回は【jQuery】横スクロールする際のヒントを表示、ScrollHintの使い方!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
横スクロールする際のヒントを表示するプラグインの解説しております。
今回はScrollHintについて解説しております。

今回は、横スクロールする際のヒントを表示するプラグインについての解説になります。
主に、テーブル(table)を作成した際、コンテンツ幅に収まらず横スクロールさせる場合があると思います。

その際に、ユーザーが横スクロールに気づかない場合もあります。
また、無理矢理コンテンツ幅に合わせてテーブル(table)を作成してしまうと、「見づらい・読みづらい」問題もでてきます。

そんな時に便利なプラグインが「ScrollHint.js」になります。
今回は、プラグインのダウンロードから、設置までの流れを解説します。
イメージ図は以下になります。

[記事の内容]

ScrollHintについて

w>ScrollHint.jsとは、横スクロールする際のヒントを表示するプラグインのことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「ScrollHint.js」をダウンロードしましょう。

●ScrollHintにアクセス: 1https://appleple.github.io/scroll-hint/

●「Download」ボタンをクリック: 2

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「scroll-hint-master」をご確認ください。

●CSSファイル: 1「css」 > 「scroll-hint.css」を使用します。

●jsファイル: 2「js」 > 「scroll-hint.min.js」の2点を使用します。

<!--css-->
<link rel="stylesheet" href="css/scroll-hint.css">
<!--js-->
<script src="js/scroll-hint.min.js" type="text/javascript"></script>

また、「scroll-hint.min.js」を使用する際には、scrollを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--css-->
<link rel="stylesheet" href="css/scroll-hint.css">
<!--js-->
<script src="js/scroll-hint.min.js" type="text/javascript"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable');
});
</script>

「scroll-hint.min.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--css-->
<link rel="stylesheet" href="css/scroll-hint.css">
<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/scroll-hint.min.js" type="text/javascript"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable');
});
</script>

必ず、jquery本体のプラグイン上、scroll-hint.minを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはhead内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】横スクロールする際のヒントを表示</title>
<!--css-->
<link rel="stylesheet" href="css/scroll-hint.css">
<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/scroll-hint.min.js" type="text/javascript"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable');
});
</script>
</head>
<body>
	
 コンテンツ 
 
</body>
</html>

横スクロールする際のヒントの表示について

次に、テーブル(table)の設定について解説します。
親要素にdivに、クラス名(class)js-scrollableを指定します。
書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】横スクロールする際のヒントを表示</title>
<!--css-->
<link rel="stylesheet" href="css/scroll-hint.css">
<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/scroll-hint.min.js" type="text/javascript"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable');
});
</script>
</head>
<body>
	<div class="js-scrollable">
		<table>
		  <thead>
			<tr>
			  <th>見出し01</th>
			  <th>見出し02</th>
			  <th>見出し03</th>
			  <th>見出し04</th>
			  <th>見出し05</th>
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <td>01:テキスト</td>
			  <td>02:テキスト</td>
			  <td>03:テキスト</td>
			  <td>04:テキスト</td>
			  <td>05:テキスト</td>
			</tr>
		  </tbody>
		</table>
	</div>
</body>
</html>

.js-scrollable {
   overflow-x: scroll;
   width: 400px;
}

 table {
   width: 1000px;
 }

table , td, th {
  border: 1px solid #595959;
  border-collapse: collapse;
}

th {
  background-color: #ffd639;
}

td, th {
    padding: 2em 3em;
    box-sizing: border-box;
    font-size: 1rem;
    text-align: center;
}

今回は、親要素のjs-scrollablを400pxに指定しています。
テーブル(table)幅が400以上の際に、overflow-x: scrollを適用させています。

このように、横スクロールがある際には、「scroll-hint.min.js」が適用され、ヒントを表示させてくれます。
次にオプションについて解説します。

オプション01:文字の変更について

オプションは、様々あり、「Scrollable」の文字を変更したり、「ヒントを背景色」を白くすることが
可能になります。
「scrollable」をシングルコーテーションで囲み、お好みの文字を変更します。

<script>
new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: 'スクロールします'
  }
});
</script>

オプション02:背景色を変更について

「scrollHintIconAppendClass」をシングルコーテーションで囲み、「scroll-hint-icon-white」を変更します。
背景色は白色のみになります。

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

その他オプションについて

上記で解説したオプションが主に使用するものだとおもいます。
その他、一部のオプションもありますので参考にしてみてください。

指定できる値

i18n.scrollable
scrollableの文字を変更可能になります。
デフォルト値： scrollable
scrollHintIconAppendClass
背景色の色を白色にします。
デフォルト値： scroll-hint-icon-white
remainingTime
一定時間が経ったらヒントが非表示になります。
デフォルト値： -1
scrollHintBorderWidth
影をつける場合に影の幅を指定します。
デフォルト値： 10
enableOverflowScrolling
iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。
デフォルト値： true
scrollableClass
要素がスクロール可能であるときに追加されるクラス名になります。
デフォルト値： is-scrollable