SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

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

ScrollHintのイメージ図になります。

ScrollHintについて

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

公式サイトには、その他オプションが記載されております。
一度、ご確認してみてください。

まとめ

今回はこれで以上です。

POINT
  • ScrollHintとは、横スクロールする際のヒントを表示のことを示します。
  • 必要なファイルはscroll-hint.cssscroll-hint.min.jsの2点になります。
  • 「scroll-hint」を使用する際には、scroll-hintを使用する宣言をしなければなりません。
  • 様々なオプションを試してみてください。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top