グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

横に長いコンテンツ（表組みなど）を表示させる場合、画面のサイズによっては横スクロールがでてしまいます。
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。

横長コンテンツの上には下記のような画像を表示させるようにしていました。



画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト

設定はすごく簡単です。

（1）
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。

（2）
横スクロールが出るコンテンツを下記divで囲う。

<div class="js-scrollable">〜</div>

（3）
下記スクリプトをコンテンツより後に記述。

<script>new ScrollHint('.js-scrollable');</script>

【例】


※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options