横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユーザによってはその要素がスクロール可能というのを気付かなかったりする。これを視覚的に分かりやすくしたいと思い調べたところJavaScriptの「ScrollHint」ライブラリが良さそう。以下にサンプルと利用方法をメモ。

サンプル

https://taitan916.info/sample/ScrollHint/

ScrollHint

公式サイト

https://appleple.github.io/scroll-hint/

CDN

CDNで使う場合は以下を記述する。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

利用方法

ソースコード

<style>
.contents{
    width: 200px;
    overflow: auto;
    white-space: nowrap;
    height: 200px;
    border: 1px solid #ccc;
}
</style>

<div class="contents">
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/
</div>

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script>
new ScrollHint('.contents', {
    i18n: {
        scrollable: 'スクロールできます', //表示テキスト
    },
});
</script>

オプション項目について

設定可能なオプション項目はこちらのページを参照すること。

所感

縦スクロールにも対応してくれれば良かったんだけど、対応していないっぽい。

縦スクロールの場合はSimpleBarライブラリで装飾するのが良いかも。