2022.11.28
[便利なJSプラグイン紹介]横スクロール可能な要素にヒントアイコンを表示する[ScrollHint]
こんにちは
MaromaroのTakaです。
今回は便利なJSプラグイン「ScrollHint」について紹介致します。
ScrollHintは、
↓のように横スクロール可能な場合に視覚的に横スクロールが可能かどうかが分かるようになる便利なプラグインです。
私的にScrollHintの主に活躍する場面は、
複雑なテーブル組されている要素をレスポンシブ対応するのが大変な際に、
レイアウトを維持したまま違和感なくスマホ表示に落とし込める部分かと思っております。
使い方
導入方法は簡単で、
公式ページ から右上のDownloadボタンを押しフォルダを解凍してください。
解凍後下記の2ファイルを設定してください。
scroll-hint-master/js/scroll-hint.js
scroll-hint-master/css/scroll-hint.css
使い方については、
例えば以下のようなHTMLがあった場合
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
以下のようにdivで囲みます。
Classについては任意のもので大丈夫です。
<div class="js-scrollable">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
</div>以下のスクリプトをscroll-hint.jsより後に記載してください。
※クラス名は任意でOKです。
<script>
new ScrollHint('.js-scrollable');
</script>発動条件としては
親内の要素が親要素を超えたときに発動します。
完成形のイメージは↓の通りとなります。
See the Pen Untitled by 佐々木 貴徳 (@whxwrxyj) on CodePen.
※スマホ時のみスワイプ可能です。
対応としては以上となります。
とても簡単に設定できるものなので、
有効活用して頂ければと思います。
このプラグインにはオプションがいくつかありますが、
あまり使うことはないと思っております。
オプションを使う際は公式サイト参考に頂ければ幸いです。
以上、Ｔａｋａでした。
